Keyword

jQuery conflict with OwlCarousel.js

  • Alain Desormiers
  • Alain Desormiers's Avatar Topic Author
  • Offline
  • New Member
More
7 years 6 months ago #164702 by Alain Desormiers
jQuery conflict with OwlCarousel.js was created by Alain Desormiers
The new [ plg_jw_allvideos-v4.8.0_j1.5-3.x.zip ] is conflicting with OwlCarousel.js in Rockettheme Gantry5 themplates.

Using : YOUTUBE insertion in page. {youtube}xxx{/youtube}

OLD Allvideo v.4.7.0 is working well

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 6 months ago #164712 by Krikor Boghossian
Replied by Krikor Boghossian on topic jQuery conflict with OwlCarousel.js
Hello,

is there a link to your site?

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
7 years 3 months ago #166003 by Luke Douglas
Replied by Luke Douglas on topic jQuery conflict with OwlCarousel.js
Krikor,

I can confirm that this was this issue on a new redesign that I am doing for a website. This was a new installation of the Gantry 5 platform and the Helium template which has the Owl Carousel particle. It was confusing as I use this same combo on a couple of other sites which worked fine. I tried to remove all potential JS conflicts but those other two did NOT have the AllVideos plugin installed so I never made the connection. In the Gitter Gantry 5 group, one of the members mentioned AllVideos as a potential conflict. Once I disabled it on the redesign development site, the Owl Carousel worked perfectly.

Prior to disabling AllVideos, this was the JS conflict I was getting:

index.php:768 Uncaught TypeError: jQuery(...).owlCarousel is not a function
at index.php:768
at dispatch (jquery.min.js?f373e0c9c52d54852a074f6de4f86a36:3)
at r.handle (jquery.min.js?f373e0c9c52d54852a074f6de4f86a36:3)

Naturally, nothing was every shown in this message 'where' the potential conflict was occuring which meant we, as developers, have to go piece by piece to disable other modules, articles or plugins that use JS. In this case, it was the AllVideos.

Since this is a development site, I do have it live (NOINDEX NOFOLLOW) as I have another 3rd party developer who is working on an issue. If you would like to have a super user account and do some diagnostics by activating the AllVideos plugin, I can set this up for you and send via the Help Desk ticket system or you can send me an email to This email address is being protected from spambots. You need JavaScript enabled to view it..

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 3 months ago #166008 by Krikor Boghossian
Replied by Krikor Boghossian on topic jQuery conflict with OwlCarousel.js
index.php:768 Uncaught TypeError: jQuery(...).owlCarousel is not a function

Was the owlCarousel script being loaded?
Furthermore was that script being loaded before the initialisation script?

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
7 years 3 months ago #166012 by Luke Douglas
Replied by Luke Douglas on topic jQuery conflict with OwlCarousel.js
Krikor,

As far as I can see, it probably wasn't as the owl-loaded class was not displayed.

Luke

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 3 months ago #166020 by Krikor Boghossian
Replied by Krikor Boghossian on topic jQuery conflict with OwlCarousel.js
Can you send me a URL where both extensions are enabled?

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
7 years 3 months ago #166025 by Luke Douglas
Replied by Luke Douglas on topic jQuery conflict with OwlCarousel.js
Krikor,

As I have disabled the AllVideos plug-in, there is no page where both are being loaded.

I have no issue working with companies like yours to get issues resolved, especially with conflicts. I've been in this web development game for over 16 years after 25 years of application development and have worked with many companies like yours. I've used JoomlaWorks products for about 10 years and have great respect for your developers as well as the Joomla development team, which I actually submitted a few lines of enhanced code many years ago and it was intergrated into Joomla. Let's just say I'm an old hack who knows some things and doesn't know some things. In this case, I've exhausted my abilities to diagnose exactly what is the issue.

Do you want me to setup a super admin account for you and send via the help desk or you send me an email to This email address is being protected from spambots. You need JavaScript enabled to view it. so I can reply with the admin URL and credentials? That way, you can enabled the AllVideo's plugin, do your research/diagnostics to see if you can find the issue and then either fix it, let me know how to fix it or just disable the AllVideo's plugin so the Owl Carousel will work, as it is working now.

Luke

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
7 years 3 months ago #166045 by Krikor Boghossian
Replied by Krikor Boghossian on topic jQuery conflict with OwlCarousel.js
Hello Luke and Merry X-Mas,

This sounds fine, you can use the contact form www.joomlaworks.net/support/contact in order to send us credentials.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
7 years 3 months ago #166050 by Luke Douglas
Replied by Luke Douglas on topic jQuery conflict with OwlCarousel.js
Credentials sent! :)

Please Log in or Create an account to join the conversation.

More
6 years 5 months ago #170123 by Robert Hughes
Replied by Robert Hughes on topic jQuery conflict with OwlCarousel.js
I'm having this exact same issue right now. Did someone at JoomlaWorks ever fix this issue in the allvideos plugin?

Please Log in or Create an account to join the conversation.

More
6 years 5 months ago - 6 years 5 months ago #170124 by JoomlaWorks
Replied by JoomlaWorks on topic jQuery conflict with OwlCarousel.js
AllVideos doesn't use jQuery. If you have a specific JS conflict issue, I can only help you if you provide a URL to your site.

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Last edit: 6 years 5 months ago by JoomlaWorks.

Please Log in or Create an account to join the conversation.

More
6 years 5 months ago - 6 years 5 months ago #170125 by Robert Hughes
Replied by Robert Hughes on topic jQuery conflict with OwlCarousel.js
goto: www.achieveforumalliance.com

[removed by moderator]

I'll delete this account once you are done.

You can see that the video is loading using, {mp4}general<span>/Alliance-Premium-Video-Overview-2</span>|100%|100%|0|{/mp4}

And our main OwlCarousel is not displaying and there is an error in the console.

If I remove the {mp4} tag from the content of the page, then the OwlCarousel displays properly and displays NO error.
Last edit: 6 years 5 months ago by JoomlaWorks.

Please Log in or Create an account to join the conversation.

More
6 years 5 months ago #170134 by JoomlaWorks
Replied by JoomlaWorks on topic jQuery conflict with OwlCarousel.js
I got the credentials but for your safety, don't post credentials again in public. If you want to send me credentials in the future, you can use our contact form.

Like I said, I have the credentials. But which page are you referring to?

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #170485 by Francois Gagnon
Replied by Francois Gagnon on topic jQuery conflict with OwlCarousel.js
Hi,

I have the same issue on my development website : sai.symbiosetechno.com
in home page, the carousel isn't show correctly image but the video below work well.
If I disable plugin allvideo, the carousel work well.
I work with template Chimera (gantry 5) from Rockettheme.
From what I see, it seems to have issue on load mootools (core/more).

thanks.

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #170496 by JoomlaWorks
Replied by JoomlaWorks on topic jQuery conflict with OwlCarousel.js
Version 4.8.0 was loading Mootools without it being needed. I have fixed this in v4.8.1 (dev) which you can grab from here: github.com/joomlaworks/allvideos/archive/master.zip

Let me know.

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #170522 by Francois Gagnon
Replied by Francois Gagnon on topic jQuery conflict with OwlCarousel.js
Thanks for your quick reply.

After test : No, this new version 4.8.1(dev) not work. same error at the same place.

After I have read many posts. I understand that :
1) CLAPPR (library video you use to show video) is not compatible with Mootools.
2) RokSproket (who use class OwlCarousel into themplate of Rockettheme) must have Mootools
(because I try to remove it with plugin who disable mootools, and that not work and create many error)

So, base on that, is it true to said : AllVideo can't work into this context?

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #170539 by JoomlaWorks
Replied by JoomlaWorks on topic jQuery conflict with OwlCarousel.js
OwlCarousel is jQuery based, so something else is force-loading Mootools.

Until I add an option to allow loading an older version of Clappr (one that's still compatible with Mootools), replace lines 151 to 156 in /plugins/content/jw_allvideos/jw_allvideos.php:
            // Clappr
            if (version_compare(JVERSION, '3.0.0', 'ge')) {
                $document->addScript('https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js?v=4.8.1');
            } else {
                $document->addScript('https://cdnjs.cloudflare.com/ajax/libs/clappr/0.2.68/clappr.min.js?v=4.8.1');
            }

with this:
$document->addScript('https://cdnjs.cloudflare.com/ajax/libs/clappr/0.2.68/clappr.min.js?v=4.8.1');

This change will simply load the older release of Clappr.

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago - 6 years 4 months ago #170552 by Francois Gagnon
Replied by Francois Gagnon on topic jQuery conflict with OwlCarousel.js
This not work. same error at the same place.
What I try is comment the include line of clappr.min.js (I expected the jwvideo not work) and the rest of page work well.
Other thing, I observer (in source page) the order of list of js file. the
jw_allvideos/jw_allvideos/includes/js/jwp.js.php?v=4.8.1 and
cloudflare.com/ajax/libs/clappr/0.2.68/clappr.min.js?v=4.8.1
come in first js.
I don't know why this plugin can put this js link in first (I try to change order of plugin but nothing change in source page).
and I can't change the order to test if this can do differences.
Last edit: 6 years 4 months ago by Francois Gagnon.

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #170558 by JoomlaWorks
Replied by JoomlaWorks on topic jQuery conflict with OwlCarousel.js
These 2 JS files don't need either Mootools or jQuery. So they don't cause any conflicts. That being said, perhaps other JS loaded in your site breaks the Clappr player.

In any case, the coming v5 update of AllVideos will prefer native media playback using the <video> tag and use fallbacks for unsupported media types.

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum