2

Users of my service includes a JS in their pages that I provide. I am hosting the script they are including. My script does some manipulation on their content. I am sick of writing my own DOM manipulators/selectors and wasting hours for jobs that can be done with 1 line of code if I can use jQuery.

Some of the users of my service already uses jQuery (or Prototype etc.) on their pages, so if I include jQuery there will be a conflict. Because there will be version differences, I don't want to use their jQuery selectors, methods either in case jQuery exists.

Keeping in mind that I have no control over their pages, how can I include jQuery and avoid conflict?

nimcap
  • 10,062
  • 15
  • 61
  • 69

3 Answers3

6

Short version: you can't.

Including jQuery twice leads to all sorts of issues, the big one being it erases any plugins/functions you add. Also, it can introduce a lot of problems for their use of jQuery...it's not really designed with having multiple versions present in mind.

.noConflict() works against other library conflicts, but you're not worrying about $ here, you're redefining the jQuery object, that's where problems crop up. For example it rigs up handlers etc when it starts, if it gets overridden by another version further in the page...well, uh oh, trouble can arise quickly.

Another great example: events are stored/accessed $.data(elem, 'events'), which uses $.cache (interally, open a console on this page, check it out), which would be re-defined, losing event handlers, and sanity along with it :)

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • oh noes :( very bad news for me – nimcap Jun 17 '10 at 12:55
  • @nimcap - What kinds of things are you doing? I never said there wasn't *some* easier way :) – Nick Craver Jun 17 '10 at 13:00
  • There are several parts. Firstly, I walk the DOM and store in a variable several Nodes by their class, name, id etc. for later manipulation. Second, I do DOM manipulation. I change the appearance of some elements in their pages according to some rules. Sometimes I add some elements. I do nearly every basic operation that a JS framework provides. – nimcap Jun 17 '10 at 13:14
  • 2
    @nimcap - You *could* rename jQuery I guess, look at the bottom of core here: http://github.com/jquery/jquery/blob/master/src/core.js You could change `window.jQuery = window.$ = jQuery;` to `window.myQuery = jQuery;` (`jQuery` in that line is local to the closure)...I can't promise anything though, this may (probably does) have some side-effects. – Nick Craver Jun 17 '10 at 13:40
  • What about using this solution? http://stackoverflow.com/questions/528241/how-do-i-run-different-versions-of-jquery-on-the-same-page – Joel Feb 03 '11 at 10:50
  • I concur - you absolutely can do this using jQuery noConflict mode. Even plugins can be loaded on both versions, by passing a noConflict version of the jQuery variable into an IIFE, loading the plugins in there, and returning the new $ variable to a, say, $j variable that accepts the return result of the IIFE. I know - I've done it, and it works just fine. If anyone would like I can post a code sample (just not in a comment - it's a bit too complicated). – Andrew Faulkner Sep 08 '15 at 05:24
0

Mostly I needed selectors, so the other day I stumbled onto this: Sizzle, A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

It can be used to avoid conflicts with any other Sizzle instances. I am very happy that I found this solution.

nimcap
  • 10,062
  • 15
  • 61
  • 69
  • 2
    I know this is old, but I would like to add that jQuery actually uses Sizzle internally for it's own selector engine. – James Hay Feb 28 '12 at 02:41
0

To do that, you first add the first jQuery version, for example: scr="/jquery-1.2.3.js" then under it you add:

var jq123 = jQuery.noConflict(true);

So from now on, to call for this jQuery version, instead of "$", use "jq123", for example, I wanted to call for a Lavalamp menu function using this version of jQuery, I'd do: 

    jq123(function() {

        jq123("#1, #2, #3").lavaLamp({

});

    });

Instead of: $(function() {

        $("#1, #2, #3").lavaLamp({

});

    });

Then, you add the other version of jQuery without any changes, for example: and you will call functions in it normally with a "$" symbol. I hope this helped.

Nick Rameau
  • 1,258
  • 14
  • 23