[Résolu] View slider and js don't works in Divi 4.0

[Auteur]

Publications

[francescoG-3]

I am trying to: Hi, I have created some posts sliders using Toolset View, before using Divi 4.x them works fine, but now I have seen that they don't slide.
And there are also some issues with js form in View and in Content Template. The js codes that I have used, worked before Divi 4.x, but now, the system doesn't take and play them.

Link to a page where the issue can be seen:
lien caché
lien caché

I expected to see: the sliders and carousel that works

Instead, I got: a static post image

[Nigel]

I can see lots of errors in the browser console (screenshot).

I think this was actually related to a change in the enqueuing of jQuery in WP5.3.

The $ shortcut for jQuery may not be available when you are trying to use it.

You should edit your custom JS scripts to either refer to jQuery using 'jQuery' instead of $, or you can wrap them in a dom ready listener which sets up the jQuery $ shortcut, something like this:

( function( $ ) {
	$( document ).ready( function(){
		// Your code here

	});
})( jQuery );

That would have been the best practice for using jQuery in custom JS snippets anyway, but it seems you wouldn't necessarily have triggered errors before if not using this.

[francescoG-3]

Hi Nigel,
I don't have understanding.
Well, the issue is inside the Toolset View plugin code?
Because the slider set by standard View option don't slide...

[Nigel]

The slider operates via JavaScript.

There are lots of JS errors on the page, and even if the errors do not originate with the Views code that operates the slider, the other errors on the same page can prevent the JS that operates the slider from working.

So you must eliminate all the JS errors on the page, and only then if the slider still does not work can we establish that there is a problem with the slider.

From those errors it looks like you added quite a bit of custom JS to the page, which is trying to use jQuery using the familiar $ shortcut for jQuery, but that shortcut is not ready at the time your custom JS is running, which is causing the errors.

I recommend wrapping your custom JS code snippets inside the code I shared above to prevent this.

[francescoG-3]

So,
This work fine, solve my issue with my custom js code in gianetmedia.com:

( function( $ ) {
    $( document ).ready( function(){
        // Your code here
 
    });
})( jQuery );

But in inonda.tv slider I don't have used custom js code, but I will try to disable some plugins...

[Nigel]

On inonda.tv the first error is from a moneytizer plugin, so I would start there...

[francescoG-3]

Hi Nigel,
in inonda.tv I have deactivated the moneytizer plugin and facebook customer chat plugin that they generate more js error in console, but the sliders don't work yet...
Can you verify now?

[Nigel]

There are still numerous JS errors on the page, but I can't see where they are coming from, as the debug info in the browser dev tools points to somewhere in the source HTML where there is no JS.

Can I take a look at the site backend? I don't think I still have credentials for this site, if you could let me have them in the following private reply...

[Nigel]

In the slider View I saw that script tags were added directly to the editor (rather than using the custom JS editor sections), so you do have examples of custom JS on the page that uses the $ shortcut without it being set up properly.

I suggest you find all such examples on the page and edit them, and that should hopefully resolve the problem.

[francescoG-3]

Hi Nigel,
I use that JS, I didn't remember using it in this case, to add the current link to all slider section and not only on the title (the featured posts image is set as section background) and the "div" cannot be enclosed by "a", but I think that in the next future to replace "div" with "span" in this case.

And, I have added this js code inside the loop because if I add it in the Editor JS, this code works only with the first slide, and not with the others... I don't know how can I enable the use of the Editor JS Dom... can you send me a guide to enable the Dom?

Well, I will try soon to englobe the js script inside here:

( function( $ ) {
    $( document ).ready( function(){
        // Your code here
 
    });
})( jQuery );

[Nigel]

Sorry, I'm not sure what you mean by "how can I enable the use of the Editor JS Dom"?

[francescoG-3]

Well, in one of my test site, you have enabled some special options, like as DOM, in the "Editor JS" in View.

[Nigel]

Do you mean the custom JS events provided by Views?

Placeholder code for those can be inserted with the Frontend events button found in the custom JS editor in the Search and Pagination section (screenshot).

If you need to you can copy and paste that to other JS editors.

[francescoG-3]

Sorry for my delay. I will try this solution very very soon.

[Nigel]

Sure, okay, let me know.