0

For the life of me, I can't figure out how to get jQuery.noConflict() to work to resolve the problems caused by needing two different versions of jQuery on my site. I have read numerous articles online and read other people's questions and answers on this site, but nothing seems to work and I can't figure out why, though my situation is a little different from the others that I've read.

Let me try to explain my situation and what I've tried. I have several different plugins that require jQuery 1.4.2 and can't work with anything higher. I have a single plugin that uses a newer version, jQuery 1.7.1. The older plugins and the one newer plugin need a $(document).ready( function() to get initialized. I have a feeling this is where my trouble lies. It seems that I need to have 2 instances of $(document).ready( function(), each using a different jQuery library, but I'm not exactly sure how to do this. (This is the part that I said makes my situation a little different from other peoples that I've read about.)

Here's the basic setup:

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/plugin1.js"></script>
    <script type="text/javascript" src="js/plugin2.js"></script>
    <script type="text/javascript" src="js/plugin3.js"></script>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/plugin4.js"></script>

Now I need a $(document).ready(function() to initialize and start the plugins. Since plugin1, plugin2, and plugin3 use jQuery 1.4.2, and plugin4 needs jQuery 1.7.1, I figured that I needed to use two different instances of $(document).ready(function(). First I tried this approach, which is how some websites describe as the proper way to use noConflict():

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script>var jQuery1 = jQuery.noConflict( true );</script>
    <script type="text/javascript" src="js/plugin1.js"></script>
    <script type="text/javascript" src="js/plugin2.js"></script>
    <script type="text/javascript" src="js/plugin3.js"></script>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script>var jQuery2 = jQuery.noConflict( true );</script>
    <script type="text/javascript" src="js/plugin4.js"></script>

    jQuery1(document).ready( function(){
      // initialize plugins 1, 2, and 3 here using jQuery1 instead of $
    });

    jQuery2(document).ready( function(){
      // initialize plugin 4 here using jQuery2 instead of $
    });

This approach alone didn't work. So then I went into plugin4.js and changed all instances of $ to jQuery2. That also didn't work. I've tried noConflict without the boolean true. Didn't work. Can anyone tell me what I'm doing wrong? Do I need to go into plugin1.js, plugin2.js, and plugin3.js and change all instances of $ to jQuery1? I'm not 100% on how noConflict() works so I'm not sure if this is necessary. However, I hope I don't have to do this because plugin3.js has been obfuscated so I wouldn't be able to anyways. If anyone can help, it would be greatly appreciated.

John
  • 473
  • 5
  • 20
  • 1
    instead of jQuery.noConflict() maybe just try `var jQuery1 = jQuery;window.jQuery=undefined;` that way, there will be no trace of the old jQuery, you may have to wrap your code in a `window.onload` or just put another in a `setTimeout` to wait for the first code to execute – Downgoat Mar 27 '15 at 22:29
  • Thanks for the help. What do you mean by wrap my code in a window.onload? – John Mar 28 '15 at 00:18
  • `window.onload = function(){/*code goes here*/};` – Downgoat Mar 28 '15 at 00:19
  • What code would I put in there though? I still have the conflicts between the 2 jQuery libraries. I've tried using a different variable name with the later version of jQuery, which is actually supposed to run first, and left the earlier one alone thinking it would just use $, but still can't get it to work. Everything breaks basically! – John Mar 28 '15 at 00:28
  • I see, you used jQuery's .ready() missed that somehow – Downgoat Mar 28 '15 at 00:30
  • I got downvoted? I'm pretty sure my question shows research effort (the lack of which is why you downvote according to the tooltip when you hover over the down arrow - whoever downvoted me should read that) since I mentioned I had looked up the answer on several websites and read up on other people's similar questions on this site. I also attempted a solution on my own which I showed in my question, I didn't just ask for someone to write all the code for me. I asked a question, got an answer that guided me in the right direction, and ultimately figured it out myself. Why the downvote? – John Mar 28 '15 at 01:32

1 Answers1

2

I don't think you actually want to use noConflict here, since the plugins will all need access to jQuery. You just have to run everything in the right order and keep references to the loaded jQuery versions.

Furthermore, the ready event handler gets passed a reference to jQuery, so you can name it whatever you want (preferably $).

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>var jQuery1 = jQuery;</script>
<script type="text/javascript" src="js/plugin1.js"></script>
<script type="text/javascript" src="js/plugin2.js"></script>
<script type="text/javascript" src="js/plugin3.js"></script>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>var jQuery2 = jQuery;</script>
<script type="text/javascript" src="js/plugin4.js"></script>

<script>
   jQuery1(function($){
      // initialize plugins 1, 2, and 3 here using $
   });

   jQuery2(function($){
      // initialize plugin 4 here using $
   });
</script>
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • Thanks for the help! I'm still having some trouble though. Plugin4.js, which uses the later version of jQuery, is working, but the plugins and scripts requiring the earlier version of jQuery are not. Plugin4.js is actually an image preloader, so by design it's supposed to run first, before plugins 1, 2, and 3, which are other effects, animations, etc on the page, that are shown after the preloader finishes. As you said, everything needs to run in the right order, but since the plugin using the later version of jQuery gets called first, perhaps this is the problem? Any ideas? – John Mar 27 '15 at 23:53
  • Well, there is still the possibility that the plugins are written in such a way that they are not capturing the current instance of jQuery. In that case you would have to edit them to follow the guidelines. See http://learn.jquery.com/plugins/basic-plugin-creation/#protecting-the-alias-and-adding-scope – Felix Kling Mar 27 '15 at 23:57
  • I'm trying to edit plugin4.js in a way to use it with the jQuery2 variable, but nothing I've tried works. I've changed all the $s to jQuery2, etc. Either plugin4 breaks, or 1, 2, and 3 break. I can't get them all to work. Eeek, I may just separate the preloading page and the main page to avoid the conflict, but that kinda kills my SEO if my front page is just preloading images that appear on the main page and there's no text. Thanks for the link, I was reading up on that, but it's a bit over my head. – John Mar 28 '15 at 00:21
  • You shouldn't have to edit any of them. The plugins just have to be inside something like `(function($) { .... }(jQuery))` or `(function(jQuery) { .... }(jQuery))`. Then what I posted will work. – Felix Kling Mar 28 '15 at 00:23
  • If i'm not using a $(document).ready( function() of some sort, only jQuery1(function($){ }, jQuery2(function($){ }for example, how or when do the functions get called? Sorry if my questions are stupid, I haven't been learning jQuery for too long. – John Mar 28 '15 at 00:32
  • `jQuery1(function($){ });` is the short form for `jQuery1(document).ready(function($){ });`. See http://api.jquery.com/ready/ – Felix Kling Mar 28 '15 at 00:33
  • Got it, that's helpful. I have one "scripts.js" file which works with jQuery 1.4.2, which isn't really a plugin, it is just a bunch of functions I wrote for different animation effects, etc which should be visible after the preloader finishes. The preloading plugin works fine using the method you posted, but nothing in "scripts.js" works now. Everything in there was previously wrapped in a $(document).ready( function(){ }, which I changed to jQuery1(function($){ }. I cant tell if any of the other plugins are working because I need scripts.js to load all the content on the page.Ideas? – John Mar 28 '15 at 00:48
  • Not anymore at this point. All I can suggest you is to do some debugging by setting breakpoints in the plugins and check which jQuery version they reference at the time they are executed. – Felix Kling Mar 28 '15 at 00:51
  • I think I've got it now. I put the jQuery2 stuff above the jQuery1 stuff, removed the jQuery1 variable and just left it as is with the $(document).ready(function () {}). Then i used your method to initialize the plugin4 stuff. Now it seems to be working the way I wanted it to, except that the "scripts.js" stuff starts running while the preloader is going. I think i can solve this by calling the scripts.js stuff in a callback function after plugin4 runs. Thanks for the help!!! – John Mar 28 '15 at 00:58