CODEWITHSUNDEEP
javascriptjqueryconflicting-libraries
John
John

Reputation: 473

Conflict with jQuery.noConflict()

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.

Upvotes: 0

Views: 2242

Answers (1)

Felix Kling
Felix Kling

Reputation: 816930

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>

Upvotes: 2

Related Questions