avoiding jquery conflict

Question

I am using the script shown below.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>

    <script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>

After adding this code in my blog, many other widgets like dropdown menu involving javascript stop functioning. The other codes I have used are shown below.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'/>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>

Can anyone please tell me how to remove this conflict?

Edit:Okay, can you make it more clear? I am a noob here and can't understand what you guys are saying. Can you change my code and show me how it works?

Possible duplicate of http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page — Raghav, Mar 15 '12 at 19:28
You switched from jquery 1.2.6 to 1.7.0. I'm sure there were a lot of breaking changes between these two versions. — Daniel Lorenz, Mar 15 '12 at 19:29

Kevin B · Accepted Answer · 2012-03-15T19:40:12.803

After this script include:

<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>

use this:

$.noConflict(true);

Also, those script tags are invalid, script tags must have both an opening tag and a closing tag, they can't be self closing.

Update for comment:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>    
<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'></script>
<!-- any other scripts that depend on the above code goes here -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'></script>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'></script>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'></script>
<!-- also any other scripts that depend on the above scripts go here -->

<script type="text/javascript">
$.noConflict(true);
</script>

I didn't understand. After which code do I add the code you provided me? And where do I add the noconflict code? — John Merchant, Mar 15 '12 at 19:35
Awesome, It's working!!! Thanks a lot. Also I have one more question. Does keeping the newer versions of jquery below the older versions always solve these kinds of problems? Cheers, once again! — John Merchant, Mar 15 '12 at 19:44

score 0 · Answer 2 · answered Mar 15 '12 at 19:30

You are loading JQuery 1.2.6 in the first script block and then JQuery 1.7.0 in the second. The second will not load as JQuery was already loaded. I am guessing the stuff that is failing needs the functionality added to the more recent JQuery version. So make the first block load the newer version and do not attempt to load it twice in the second.

avoiding jquery conflict

2 Answers2