3

So this question isn't as crazy as it might sound at first. I'm developing a piece of javascript code to drop into my client's pages. What I'm worried about is if they are using another version of jQuery on their site.

I know from the Jquery docs that something like this should work.

var dom = {};
dom.query = jQuery.noConflict(true);

The problem is I am also using some jquery plugins, namely fancybox and mousewheel. So how can I make sure my version of jQuery is the only one that can use those plugins. I don't want a conflict to happen if one of our clients happens to use the same ones in their pages but different versions.

The only definite way I can think of right now is to modify the plugins so they only call dom.query

hadees
  • 1,754
  • 2
  • 25
  • 36
  • What version do they have and what version are you wishing to use? I'd hazard a guess - much of the library is backwards compatible and therefore you running a new version may not be totally destructive. – Glycerine Feb 21 '11 at 21:58
  • Mootools 1.3 + Mootools 1.2 don't work together. Test it! – kirilloid Feb 21 '11 at 22:07

2 Answers2

3

There is a trick you could use. If your version of jQuery is second which loads, you will need first move to safety theirs version before you load it, something like this

<script type="text/javascript">
    (function($){
       var theirs_jquery = $;
    })(jQuery);
</script>

Then add your jQuery version script include tag

<script src="link/to/my/jquery.js"></script>
 <!-- add your plugins -->
<script src="link/to/my/jquery/plugins/plugin1.js"></script>
<script src="link/to/my/jquery/plugins/plugin2.js"></script>

then add another script block with folowing

<script type="text/javascript">
(function(){
    var $$ = jQuery; // this is your shortcut
    var $ = theirs_jquery; // put back their version
})(jQuery);
</script>

after this you can access your jquery version with $$ shortcut

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Milan Jaric
  • 5,556
  • 2
  • 26
  • 34
  • If you ever inherit javascript objects, then you could recognise this pattern as same as you would use when you are overwriting methods but you need to keep base object method for execution too. – Milan Jaric Feb 21 '11 at 22:14
  • So I don't have to use jQuery.noConflict() ? Also do I need the separate script tags? I have some javascript that adds my plugins to the document so I can keep it all in another file. Can I do your code with my includeJsFile function in between? – hadees Feb 22 '11 at 23:01
  • [A1] I think you don't have to, either way, you will return in few steps $ shortcut to it. – Milan Jaric Feb 23 '11 at 11:19
  • [A2] you don't have to separeate script tags, just enclose them in (function(tolocal){ /*use to local here*/ })(global); – Milan Jaric Feb 23 '11 at 11:20
  • [A3] Yes you can if it is implemented as synchronized script load. You can't allow code be executed or parsed before you need it to be. – Milan Jaric Feb 23 '11 at 11:28
  • Instead of var $ and var $$, shouldn't it be window.$ and window.$$? – Chetan Sachdev Jul 18 '17 at 18:11
  • If you need them to be global, then yes – Milan Jaric Jul 19 '17 at 18:59
0

You could use

(function($) {        

})(dom);

To wrap you calls.

This maps dom to $ for just the code within replacing any external $ definition.

But I am not sure if this works with 2 different jQuery, maybe jQuery cannot coexist with other jQuery versions.

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
David Mårtensson
  • 7,550
  • 4
  • 31
  • 47