[Resolved] Something wrong with JS and the latest release

[Author]

Posts

[tinaH]

This is very difficult to explain but there is something strange going on with JS in the latest release.

I have pages with inline JS (jQuery) added to both Views, Content templates and CRED forms
Applied in Layout cells or to custom template pages.

I don't know which of the component that are causing the problem but I noticed it on pages with CRED forms and if I downgrade CRED the problem goes away but forms look very ugly.

Before the update all is working after update the inline scripts are loaded but they don't execute.

Example
I load a page with a form to edit a post.
I have jQuery click events and Bootstrap popups (on hover) on this page.
Neither click events nor popups work on document ready.
I inspect the page with Chrome dev tools.
I open the Network tab, select Disable Cache
Reload the page
And all is working as it should.

I empty Chrome cache and cookies
I go back to initiate the form process again and the problem is back.

In order to get JS to work I have to reload the page with Chrome network tab open and Disable cache selected.
If I stay on the page and reload it multiple times after this the JS is working. But if I leave the page and start the process over again the JS does not execute on page load.

If I downgrade CRED the problem goes away. All JS is working directly on first page load.

[Minesh]

Hello. Thank you for contacting the Toolset support.

This is strange and I would like to investigate this further.

Could you please share problem URL and access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[tinaH]

I forgot to give you the server protection password/user, please open private reply again.
I also prepared a zip package in plugins folder for you to easily switch back to Toolset versions where the inline JS is working.
Just delete Types, Views, Mpas, Layouts, CRED and Access and unzip the "Toolset" package and you're back to a version where you can check that all is working.

[Minesh]

Could you please send me duplicator package of your site.
=> https://toolset.com/faq/provide-supporters-copy-site/

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Could you please try to wrap your code with 'cred_form_ready' event.

For example:

jQuery(document).ready(function($){

jQuery(document).on( 'cred_form_ready', function() {  
        // ALL YOUR CRED form JS code goes here. Add your JS code here
   
});

});

[tinaH]

EXTREMELY IMPORTANT !!!!!!!!!!!!
please disable Stripe Plugin on the duplicator copy of my site.
It has acivated live keys. Any clicks that might - unintentionally - run a payment might execute.
PLEASE disable ASAP.

Regarding 'cred_form_ready' event, is this something new? Or, has this always been requiered?
(No problem before)

[Minesh]

Ok - I will deactivate that plugin.

Yes - this is new as we added knockout.js.

So, please try to add your script as I mentioned before:

jQuery(document).ready(function($){
 
jQuery(document).on( 'cred_form_ready', function() {  
        // ALL YOUR CRED form JS code goes here. Add your JS code here
    
});
 
});

Also, please try to eliminate $ sign as that will conflict with other libraries as it also suggested by WordPress that you should not use $ sign. Use jQuery instead.

More info:
=> https://toolset.com/documentation/user-guides/adding-custom-javascript-views/
[Section: Achieving great results with little coding by using jQuery]

[tinaH]

I have not yet had the time to test your solution. (Will do tomorrow)

Additional questions:
1. Can you please tell me how you inform your users about these changes before updating?
2. Can you direct me to a page were I can read about all the changes I have to do with my site before updating?

I have a lot of custom JS, I need to know if there are additional changes to views, content-templates, layouts, CRED forms etc that is not covered in the "legacy" settings.

[Minesh]

Additional questions:
1. Can you please tell me how you inform your users about these changes before updating?
=> We used to inform our users by publishing the relevent information with our Docs and Doc update process in ongoing currently.

2. Can you direct me to a page were I can read about all the changes I have to do with my site before updating?
=> Once we publish new doc or update existing one I will update you.

[tinaH]

Posting, not to close ticket

[iainF]

Hi

I am getting exactly the same problem on two of our sites on pages with CRED forms. This has broken these sites, and I'm going to have to change other sites. As Tina says, it would be great if you could document this BEFORE release.

I've tried updating the code with your new event, but it doesn't always fire. But, when it does - it works, so it's exactly the same as not using the event.

This is causing us serious problems and we're going to have to roll back toolset.

Regards

Iain

[iainF]

Just as an update, rolling back to CRED 1.88 solved it for us.

Iain

[Minesh]

@iainF - could you please open a new ticket.

@Tina - Ok - waiting for update from your side

[tinaH]

I have run som tests and I am unable to accept your solution.

1. It has various results. Sometimes working sometimes not.

2. When debugging it turns out that the (document).on( 'cred_form_ready') actually executes BEFORE (document).ready()
So if my goal is to add scripts when document is ready I shouldn't have to change the event order.

Why should I embed an early event inside a later event if I want the early event to happen first?
Why delay something that I want to happen before my function?
Why intervene with something that is already executing in the correct order?

Please explain your thoughts on the suggested solution?

In both of these cases debugger stops on cred_form_ready before document.ready

jQuery(document).on('cred_form_ready', function() {  
	doSomeFunction();
});
jQuery(document).ready(function () {
	doSomeFunction();
});

jQuery(document).ready(function () {
	doSomeFunction();
});
jQuery(document).on('cred_form_ready', function() {  
	doSomeFunction();
});

[Minesh]

Hello Tina,

We are working on this issue currently and trying to find the root cause of this. Please hold on for further updates.

I'll get in touch with you as soon as I know more.