Skip Navigation

[Resolved] View slider and js don't works in Divi 4.0

This support ticket is created 4 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 14 replies, has 2 voices.

Last updated by Nigel 4 years, 3 months ago.

Assisted by: Nigel.

Author
Posts
#1394575

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:
hidden link
hidden link

I expected to see: the sliders and carousel that works

Instead, I got: a static post image

#1394801

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2019-11-28 at 16.13.12.png

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.

#1395219

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...

#1395325

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

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.

#1398151

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...

#1398359

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

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

#1398757

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?

#1398873

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

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...

#1399421

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2019-12-04 at 08.36.45.png

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.

#1399483

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 );
#1401535

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

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

#1401607

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

#1401609

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2019-12-06 at 13.45.03.png

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.

#1408397

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

#1408451

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Sure, okay, let me know.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.