Loading...

Search jQuery

Search

jQuery Forum

[jQuery] Conflict with Mootools...

in Using jQuery • 14 years ago

I have a lot of jquery scripts in my html and I just added a mootools
script.
Now none of my jquery scripts don't work.
<script type="text/javascript" src="/src/js/rssticker.js"></script>
<script type="text/javascript" src="/src/js/slideshow.js"></script>
<script type="text/javascript" src="/src/js/jquery/lavalamp/
jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/lavalamp/
jquery.easing.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/lavalamp/
jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/
jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/
jquery.labelify.js"></script>
<script type="text/javascript" charset="utf-8" src="/src/js/mootools/
barack/barackslideshow.js"></script>
<script type="text/javascript" charset="utf-8" src="/src/js/mootools/
barack/demo.js"></script>
<script type="text/javascript" charset="utf-8" src="/src/js/mootools/
1.2.1/core.js"></script>
<script type="text/javascript" charset="utf-8" src="/src/js/mootools/
1.2.1/more.js"></script>
<script type="text/javascript" charset="utf-8" src="/src/js/mootools/
barack/morphlist.js"></script>
I need help.
Can someone show me how to use the "noconflict" script.....
Many thanks.
Erik

Replies(18)

MorningZ

Re: [jQuery] Conflict with Mootools...

14 years ago

How come you are including both 1.2.3 and 1.2.6 versions of jQuery?

Re: [jQuery] Conflict with Mootools...

14 years ago

Have you checked out the documentation?:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Karl Rudd

Re: [jQuery] Conflict with Mootools...

14 years ago

Good question.. I'll fix that...
Can you give me the script to fix the conflict?
Erik

MorningZ

Re: [jQuery] Conflict with Mootools...

14 years ago

Rather than just myself or someone else posting what *probably* would
work... how about some work to help understand what's going on?
First off, make sure to read the link Karl posted...
Secondly, before you do *anything* jQuery related, you want to include
the library first...... you've got 3 or 4 include files that need
jQuery before you even load jQuery... that would be the reason why
your code doesn't work
Third, and related to "First", you want to set the ".noConflict" as
soon as you can so your code is consistently using the same methods
for using jQuery

MorningZ

Re: [jQuery] Conflict with Mootools...

14 years ago

oooops... reading your post for the 4th time, i realize now that the
first two files are probably not related to jQuery.... hence they'd be
safe
anyways, show some code where you are trying to use jQuery and trying
to initialize your HTML to use the plugins you need.... that would
make it easier for others to help you

Re: [jQuery] Conflict with Mootools...

14 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">Thank you.</span></font><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">
</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">I read as you instructed me and I'm still confused.</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">
</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">My first question, is there one script i can place in the header that will eliminate the conflict?</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">
</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">I actually read </span></font><span class="Apple-style-span" style="color: rgb(34, 34, 34); font-family: 'Trebuchet MS'; font-weight: bold; line-height: 19px; "><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">Using jQuery with Other Libraries</span></font></span></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">
</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">I understand the problem, but still having problems with the fix.</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">
</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">Can there be one script placed in the head of the page that will eliminate all the conflicts with different scripts?</span></font></div><div><font class="Apple-style-span" size="4"><span class="Apple-style-span" style="font-size: 14px;">
</span></font></div><div><span class="Apple-style-span" style="border-collapse: collapse; font-family: verdana; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; "><script type="text/javascript">var $j = <b class="highlight" style="background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 255, 102); background-position: initial initial; ">jQuery</b>.noConflict();</script> </span></div><div><font class="Apple-style-span" face="verdana" size="3"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">
</span></font></div><div><font class="Apple-style-span" face="verdana" size="3"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">Thanks for your help.</span></font></div><div><font class="Apple-style-span" face="verdana" size="3"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">
</span></font></div><div><font class="Apple-style-span" face="verdana" size="3"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">Erik</span></font></div><div><font class="Apple-style-span" face="verdana" size="3"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">
</span></font></div><div><font class="Apple-style-span" face="verdana" size="3"><span class="Apple-style-span" style="border-collapse: collapse; font-size: 13px; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">
</span></font></div><div>
</div><div>
</div><div><div><div>On Jan 19, 2009, at 5:16 PM, MorningZ wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div>
oooops... reading your post for the 4th time, i realize now that the
first two files are probably not related to jQuery.... hence they'd be
safe
anyways, show some code where you are trying to use jQuery and trying
to initialize your HTML to use the plugins you need.... that would
make it easier for others to help you

Re: [jQuery] Conflict with Mootools...

14 years ago

Hi Erik,
If you are using the jQuery.noConflict function and set the jQuery
Selector variable to $j as in:
var $j = jQuery.noConflict();
You need to make sure you go through all your jQuery code and change
the $() selector to $j() or whatever you set the variable to.
Also note note you need to make sure you aren't using $j in any of
your mootools code as well.
Good luck,
Steve

Re: [jQuery] Conflict with Mootools...

14 years ago

Thank you so much!!
Erik

Re: [jQuery] Conflict with Mootools...

14 years ago

I did everything you pointed out. It still doesn't work:
<script type="text/javascript">var $j = jQuery.noConflict();</script>
Where do I place this script in my html?
I verified none of my mootools is using $j()
Very frustrated.
Any help is greatly appreciated.
Erik

Re: [jQuery] Conflict with Mootools...

14 years ago

Here is my code:

<script type="text/javascript" src="/src/js/jquery/
jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/
jquery.labelify.js"></script>
<script type="text/javascript" src="/src/js/jquery/lavalamp/
jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/lavalamp/
jquery.easing.min.js"></script>
<script type="text/javascript" src="/src/js/jquery/lavalamp/
jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":text").labelify();
});
</script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 800,
click: function(event, menuItem) {
return false;
}
});
});
</script>
<script type="text/javascript">
function change(id,newtext)
{
document.getElementById(id).innerHTML=newtext
}
</script>
</head>
<body>

Re: [jQuery] Conflict with Mootools...

14 years ago

Which part of the code are you using jQuery with? Because at the very top after you call the jQuery script you should set the var $j = jQuery.noConflict() method. In then in front of all the jQuery code $ selectors change them to $j, so jQuery code will be applied to them.

Re: [jQuery] Conflict with Mootools...

14 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><b>Here all my jquery scripts in my head:</b><div>
</div><div><div><script type="text/javascript" src="/src/js/jquery/jquery-1.2.6.min.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/jquery.labelify.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery-1.2.3.min.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.easing.min.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.lavalamp.min.js"></script></div><div>
</div><div>I went through all these scripts and replaced $( with $j(.</div><div>
</div><div><b>I also changed the following script in my head:</b></div><div>
</div><div><div>$(document).ready(function(){</div><div> $(":text").labelify();</div><div>});</div><div></script></div><div>
</div><div><script type="text/javascript"></div><div> $(function() {</div><div> $("#1, #2, #3").lavaLamp({</div><div> fx: "backout",</div><div> speed: 800,</div><div> click: function(event, menuItem) {</div><div> return false;</div><div> }</div><div> });</div><div> });</div><div> </script></div><div>
</div></div><div>Next, do I place <script type="text/javascript">var $j = jQuery.noConflict();</script> at the bottom of my head?</div><div>
</div><div>I did this and still no success.</div><div>
</div><div>Erik</div><div>
</div><div>
</div><div>
</div><div>
</div><div><div>On Jan 20, 2009, at 1:37 PM, Steven Barbera wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">Which part of the code are you using jQuery with? Because at the very top after you call the jQuery script you should set the var $j = jQuery.noConflict() method. In then in front of all the jQuery code $ selectors change them to $j, so jQuery code will be applied to them.

Re: [jQuery] Conflict with Mootools...

14 years ago

It looks like you are calling jQuery multiple times in your header:
<script type="text/javascript" src="/src/js/jquery/jquery-1.<div>2.6.min.js"></script>
and
</div><script type="text/javascript" src="/src/js/jquery/lavalamp/<div>
jquery-1.2.3.min.js"></script>
2 Different versions of the framework. That might be causing some of the confusion.
Another good way to work is to try and add one script at a time to your page. Make sure the first script works then continue to add JS scripts to the page. IF you find a conflict then you know it has to do with that particular script.
Steve
</div>

Re: [jQuery] Conflict with Mootools...

14 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">I eliminated some unnecessary scripts.<div>
</div><div>This is what i have now:</div><div>
</div><div><div><b><script type="text/javascript" src="/src/js/mootools/1.2.1/core.js"></script></b></div><div><b><script type="text/javascript" src="/src/js/mootools/1.2.1/more.js"></script></b></div><div><b><script type="text/javascript" src="/src/js/mootools/barack/morphlist.js"></script></b></div><div><b><script type="text/javascript" src="/src/js/mootools/barack/barackslideshow.js"></script></b></div><div><b><script type="text/javascript" src="/src/js/mootools/barack/demo.js"></script></b></div><div><b>
</b></div><div><b><script type="text/javascript" src="/src/js/jquery/jquery-1.2.6.min.js"></script></b></div><div><b><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.easing.min.js"></script></b></div><div><b><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.lavalamp.min.js"></script></b></div><div><b>
</b></div><div><b>
</b></div><div><b><script type="text/javascript"></b></div><div><b>$j(document).ready(function(){</b></div><div><b> $j(":text").labelify();</b></div><div><b>});</b></div><div><b></script></b></div><div><b>
</b></div><div><b><script type="text/javascript"></b></div><div><b> $j(function() {</b></div><div><b> $j("#1, #2, #3").lavaLamp({</b></div><div><b> fx: "backout",</b></div><div><b> speed: 800,</b></div><div><b> click: function(event, menuItem) {</b></div><div><b> return false;</b></div><div><b> }</b></div><div><b> });</b></div><div><b> });</b></div><div><b> </script></b></div><div><b><script type="text/javascript"> </b></div><div><b>function change(id,newtext) </b></div><div><b>{ </b></div><div><b>document.getElementById(id).innerHTML=newtext </b></div><div><b>} </b></div><div><b></script> </b></div><div><b>
</b></div><div><b><script type="text/javascript">var $j = jQuery.noConflict();</script> </b></div><div>
</div><div>
</div><div>I search for all $( and replaced it with $j(.</div><div>
</div><div>MY JQUERY LAVALAMP IS NOW NOT WORKING.</div><div>
</div><div>Frustrated!</div><div>
</div><div>Erik</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div></div><div><div>
<div><div>On Jan 20, 2009, at 1:49 PM, Steven Barbera wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><script type="text/javascript">var $j = jQuery.noConflict();</script><span class="Apple-converted-space"> </span></span></blockquote></div>
</div></div></body></html>

Re: [jQuery] Conflict with Mootools...

14 years ago

Oooh, make sure you put the jQuery.noConflict() code at the top right after the lavalamp.min.js code. Also make sure you add the <script> tags around it.
Steve

Re: [jQuery] Conflict with Mootools...

14 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><span class="Apple-style-span" style="font-weight: bold; "><div><div><span class="Apple-style-span" style="font-weight: normal;">Like this?</span></div><div>
</div><div><script type="text/javascript" src="/src/js/jquery/jquery-1.2.6.min.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.easing.min.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.lavalamp.min.js"></script></div><div><script type="text/javascript" src="/src/js/jquery/lavalamp/jquery.lavalamp.js"></script><script type="text/javascript">var $j = jQuery.noConflict();</script> </div><div> <script type="text/javascript"></div><div>   $(function() {</div><div>   $("#1, #2, #3").lavaLamp({</div><div>   fx: "backout",</div><div>   speed: 700,</div><div>   click: function(event, menuItem) {</div><div>   return false;</div><div>   }</div><div>   });</div><div>   });</div><div>   </script></div><div>
</div><div>
</div><div><script type="text/javascript"></div><div>$(document).ready(function(){</div><div>  $(":text").labelify();</div><div>});</div><div></script></div><div>
</div><div>
</div><div>   </div><div><script type="text/javascript"> </div><div>function change(id,newtext) </div><div>{ </div><div>document.getElementById(id).innerHTML=newtext </div><div>} </div><div></script> </div><div>
</div><div>
</div><div>
</div><div>
</div><div></head></div><div>
</div><div><body></div><div>
</div></div><div>
</div><div>
</div><script type="text/javascript">var $j = jQuery.noConflict();</script> </span>
<div><div>On Jan 20, 2009, at 2:01 PM, Steven Barbera wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">Oooh, make sure you put the jQuery.noConflict() code at the top right after the lavalamp.min.js code. Also make sure you add the <script> tags around it.
Steve

Re: [jQuery] Conflict with Mootools...

14 years ago

<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Guess what!! I got it to work!! Very nice....<div>
</div><div>I feel like I parted the sea like moses!!!!</div><div>
</div><div>thanks.</div><div>
</div><div>Erik
<div>
</div><div>
</div><div>
<div><div>On Jan 20, 2009, at 2:01 PM, Steven Barbera wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">Oooh, make sure you put the jQuery.noConflict() code at the top right after the lavalamp.min.js code. Also make sure you add the <script> tags around it.
Steve

Re: [jQuery] Conflict with Mootools...

14 years ago

Nice job, its always a great relief after you've struggled with a problem to conquer it. Good luck with your JS.