Multiple jQuery includes in a document

Question

I have a document which uses old jQuery and I need new jQuery for a particular plug-in. My document structure looks like this:

<html>
<head>
    <script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
    <script>
        $("#elem").doSomething(); // use old jQuery
    </script>            
    <!-------- My plugin begins -------->
        <script type="text/javascript" src="jQuery.new.js"></script>
        <script type="text/javascript" src="jQuery.doSomething.js"></script>
        <script>
        $().ready(function(){
            $("#elem").doSomething();   // use new jQuery
        });
        </script>
        <div id="elem"></div>
    <!-------- My plugin ends ---------->
    <script>
        $("#elem").doSomething(); // use old jQuery
    </script>
</body>
</html>

I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.

this is a very irrelevant question. We want to use Windows 7 to play one game and Windows Xp to play another — Starx, May 21 '10 at 10:43
Why not just use the newer version alone? Don't think there will be backward compatibility issues. — Checksum, May 21 '10 at 10:47
@Starx, I don't think you understand what I want to do there. @Checksum, It's not possible to remove the old one version because I don't have access to edit that part of the page. So I have to find a way around. — ManBehindTheCurtain, May 21 '10 at 10:56
gutted - you should probably try to get the person who can edit that part of the page to change it, unless your providing something like ad content, in which case you might not want to use a library like jQuery. — digiguru, May 21 '10 at 11:07
See http://stackoverflow.com/questions/2837351/is-it-possible-to-use-2-versions-of-jquery-on-the-same-page etc — bobince, May 21 '10 at 11:38

score 13 · Accepted Answer · answered May 21 '10 at 10:56

To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.

If you cannot do this, you can run in compatibility mode. Here is how.

<script src="jquery-1.3.2.js"></script>
<script>
    var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
    var jqueryB = jQuery.noConflict();
</script>

You would need to call

jqueryB("#myelement").....

To use the alternate version.

score 2 · Answer 2 · answered May 21 '10 at 10:57

2

You should use jQuery.noConflict();

See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/

answered May 21 '10 at 10:57

Igor Pavelek

1,444
14
22

1

The link is non-existing. – Shah Abaz Khan Jul 01 '19 at 06:03

score 1 · Answer 3 · answered May 21 '10 at 11:04

As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.

Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
     <div id="elem"></div>

    <script>
        var oldFunct = function (e,o) { alert("old jquery" + o); };
        var newFunct = function (e,o) { alert("new jquery" + o); };
        $("#elem").bind("doSomething", oldFunct);
        $("#elem").trigger("doSomething", ["1"]);

    </script>
        <script>
        $(document).ready(function(){
            $("#elem").bind("doSomething", newFunct);
            $("#elem").trigger("doSomething", ["2"]);
            $("#elem").bind("doSomething", oldFunct);
        });
        </script>


    <script>
        $("#elem").trigger("doSomething", ["3"]);
    </script>
</body>
</html>

Multiple jQuery includes in a document

3 Answers3