MooTools - Open Cart/JQuery conflict

Posted on 2013-01-25
Medium Priority
Last Modified: 2013-02-03
I've got a couple of MooTools scripts (a lightbox and a open/close panel script) running on the same page as the JQuery scripts for Open Cart on a Joomla site.

The MooTools scripts run great on all of the non-Open Cart pages, but they throw an exception on the e-commerce pages.

I've tried to use jQuery.noConflict() as per this article on StackOverflow, but it's not giving me any joy yet.

The see scripts and exceptions in action here.

It's a dev site; logins are available for closer inspection.

Help greatly appreciated.
Question by:DanGilmore
  • 3
  • 3
LVL 83

Accepted Solution

leakim971 earned 200 total points
ID: 38821911
Put you script tag inside HEAD Section
<link href="/jenkins/templates/jenkins/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="http://loudandcleardesign.com.au/jenkins/components/com_chronoforms/css/frontforms.css" type="text/css" />
  <script src="/jenkins/components/com_opencart/catalog/view/javascript/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script src="/jenkins/components/com_opencart/catalog/view/javascript/common.js" type="text/javascript"></script>
  <script src="/jenkins/components/com_opencart/catalog/view/javascript/jquery/jquery.cycle.js" type="text/javascript"></script>
  <script src="/jenkins/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/jenkins/media/system/js/core.js" type="text/javascript"></script>
  <script type="text/javascript">jQuery.noConflict();</script>
  <script src="/jenkins/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="http://jenkinsconsultancy.com.au/templates/jenkins/js/fitimage.js"></script>
<script>new FitImage('http://jenkinsconsultancy.com.au/images/background2.jpg');</script><script src="http://jenkinsconsultancy.com.au/templates/jenkins/js/panel-toggle.js"></script>

Open in new window


Author Comment

ID: 38823181
I've moved all scripts from the bottom of the page to the top; that hasn't solved the problem.

As an aside, I thought it was good practice to put scripts at the bottom of the page to allow other page assets to load faster..?
LVL 83

Expert Comment

ID: 38823191
I put noconflict between jquery scriptSS and mootools scriptSS
You put it at the end :((
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.


Author Comment

ID: 38823231
Thanks Leakim - will try that as soon as I figure out how to move that auto-generated noConflict call. I've never been able to figure out how to re-order the scripts called by addScript/getHeadData
LVL 83

Expert Comment

ID: 38823235
ok and don't it going to work after, you need to move other scripts in the body and place some of them in a $(document).ready(function() {}) block
but here we go step by step

Author Closing Comment

ID: 38849556
The answer told me ~what~ to do, which is great. But after further questioning, I still have no idea ~how~ to make the necessary changes. Ended up hiring a freelancer on another site to fix the problem.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

587 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question