jQuery: noConflict

Question

I just cannot work this out. My god it's making my brain hurt, so I turn to you, the good people of the internet.

I've been staring at this, http://api.jquery.com/jQuery.noConflict/ with no luck.

My issue is that the site I'm working on already includes jQuery 1.1.3.1 but I want to do some awesome and snazzy UI work in a few places, but I want to use 1.4.2 for obvious reasons.

I've been trying to run these side by side but I can't seem to get any code to execute. I'm also needing to implement a few plugins using 1.4.2 so I'm not sure if putting jQuery over to something like $j would work, as obviously the plugins would pickup $ and jQuery as 1.1.3.1 rather than 1.4.2

Is there a way that I can wrap my code in a noConflict() block and also include the plugins that I need to create a self contained block of 1.4.2 code?

Any help would be fantastic as my poor mind weeps amid the vast wasteland that is the api docs!

Answer 1

You should simply upgrade the entire site to 1.4.2.
jQuery does not in general have many breaking changes, so that shouldn't be so hard.

Answer 2

A solid advice: don't stress your and your visitors bandwidth with two jQuery versions. Change your whole codebase to the latest version. It's got less bugs, more support and improved behavior.

Answer 3

You should post an example that isn't working. I bet we'd clear it up immediately.

I don't believe noConflict is a 'block' exactly. You use noConflict to tell jQuery that you want it to remove anything it declares from the global JavaScript namespace (because you want to load jQuery again and reuse those names).

On a page with more than 1 instance of jQuery loaded, both instances should use noConflict. I don't know if it's possible to load a second instance of jQuery if there's already an instance loaded and that instance didn't call noConflict.

@SLaks and @galambalazs: Sometimes you're writing a small amount of content that will be displayed within a larger page, such as a portal. The portal already uses a(n outdated) version of jQuery, but you need a newer version. Also you don't control the larger portal page, just the content you're writing that will be displayed within it.

This scenario accurately describes real work I do commonly.

Answer 4

I would agree with other posts that suggest trying to upgrade to 1.4.2 across the board... That said, you clearly have a good reason for attempting what you are trying to do. To my knowledge there is no easy way to deal with your situation (as I too have tried something similar).

"noConflict" simply releases the global "$" variable so that other libraries/scripts may safely use it. Given that you are trying to use two versions of jQuery "noConflict" isn't really helpful here...calling it for both versions of jQuery doesn't change the fact that both versions still need to reference the global "jQuery" object (of which there can only be one...).

The issue (as you clearly already know) is that loading the 2nd jQuery version will "clobber" the original jQuery object (and all the "customizations" made to it by plug-ins).

The only reliable (albeit incredibly inefficient) solution I could come up with is:

• Load the existing (old) jQuery version and plugins (assuming you can't avoid this)
• Load the new jQuery version
• RE-load and existing plugins and any new plugin you want to use
• Test extensively

Answer 5

I had a similar issue recently where I was using jQuery v1.3.2 on a page but a 3rd party questionnaire popup was using an older version on the same page. I eventually managed to solve the problem. I referenced jQuery 1.3.2 as follows:

 <script type="text/javascript" src"/Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript"> 
        jq132 = jQuery.noConflict(true); 
 </script> 

I then modified all my jQuery code to use jq132 instead of $. I then did a find and replace on all of the plugins I was using to replace "$(" with "jq132(" and "$." with "jq132.". There may be a more elegant approach but this worked for me. I'm far from a jQuery expert so there may be other $ syntax that you need to handle (i.e. not just "." and "(").) .