Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple jQuery includes in a document

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.

like image 486
bah Avatar asked May 21 '10 10:05

bah


1 Answers

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.

like image 120
Fenton Avatar answered Sep 21 '22 20:09

Fenton