How to run multiple versions of Jquery in one HTML

Question

I was wondering if someone could tell me if it is possible to run multiple versions of jquery in one html file? i.e.

I have 6 divs each dive contains a different jquery plugin. The first plugin runs on the latest jquery. The second powered by an older version and so forth.

I tried to implement all of these into one html, but as soon as I implement script 2 underneath, script 1, then #1 doesnt work anymore, but #2 does. As soon as I implement #3 underneath #2, then #3 works and everything above breaks.

Is there a specific way to do this? I have tried applying the noConflict code, but then the script which I assign it to, stops working. Unless I did it wrong.

I have though about using if statements to say, if var=plugin 1 gets clicked, the cancel all other jquery and only play jquery for that particular plugin. And so forth for all the other plugins. But I am not sure if this will work.

I have also thought about using a seperate $(document).ready(){}; for each plugin, but again not sure if this will work.

Is there anyone who knows how I can solve this problem? I have been battling this beast for the past 3 days & nights adn will for ever be in your debt.

ps:I didn't supply any code cause it's just so much, and a little all over the place. I can if you would like me to.

Thanks

<!DOCTYPE html>
<html>
<head>

<!-- jQuery -->
<script src="jquery191.js"></script>


<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>
<script src="js/datepicker.js"></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>

<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" /> 



<!-- liteAccordion js -->
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#div1').liteAccordion({
                onTriggerSlide : function() {
                    this.find('figcaption').fadeOut();
                },
                onSlideAnimComplete : function() {
                    this.find('figcaption').fadeIn();
                },
                autoPlay : true,
                pauseOnHover : true,
                theme : 'stitch',
                rounded : true,
                enumerateSlides : true
        }).find('figcaption:first').show();


 <!-- date picker js -->     
        $('#trip input#leavedate, #trip input#returndate').datepicker({ dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true }); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar



    }); 
  </script> 

  // datepicker

  <link rel="stylesheet" href="ui.datepicker.css"/>
    <style type="text/css">
    body { font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em; }
    #trip{ background-color: black; width: 500px;}
    #trip fieldset { border-width: 1px; width: 470px; }
    #trip .fields { padding: 25px; margin-bottom: 20px; }
    #trip div { clear: both; }
    #trip label { float: left; width: 165px; }
    #trip input { float: left; width: 200px; }
    #trip .ui-datepicker-trigger { float: left; width: 16px; }
    </style>

  // datepicker

<script src="jq.js"></script>   
<script type="text/javascript">
    var jQuery_1_2_6 = $.noConflict(true);
    </script>   

<script language="JavaScript" src="jq.date.js"></script>
<script language="JavaScript">

</script>

// Style switch

<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />




<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>
<script src="/mint/?js" type="text/javascript"></script>




</head>
<body>
    <div id="div1">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div></div>
                </li>
                <li>
                    <h2><span>Slide Three</span></h2>
                    <div></div>
                </li>
                <li>
                    <h2><span>Slide Four</span></h2>
                    <div></div>
                </li>
                <li>
                    <h2><span>Slide Five</span></h2>
                    <div></div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
    </div>

    <br><br>
    <!-- Date Picker -->
    <div id="div2">
        <form id="trip" action="#" >
            <fieldset>
                <legend>Trip Length</legend>
                    <div class="fields">
                        <div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div>
                        <div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div>
                    </div>

            </fieldset>

        </form>
    </div>
    <br><br><br><br>

    <!-- Style Switcher -->
    <div>
    <h1>Stylesheet switcher using jQuery</h1>
        <p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of <a href="http://www.jquery.com/">jQuery</a>.</p>
        <p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p>
        <p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p>
        <p>
            Currently active stylesheet:
            <span id="st1">styles1</span>
            <span id="st2">styles2</span>
            <span id="st3">styles3</span>
        </p>
        <p>Choose a different stylesheet:</p>
        <ul>
            <li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li>
            <li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li>
            <li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>

        </ul>
        <p>Please view source to see how it works or see the <a href="http://www.kelvinluck.com/article/switch-stylesheets-with-jquery">full article</a> about this script for more information. You can download the relevant Javascript here: <a href="styleswitch.js">styleswitch.js</a>, <a href="jquery.js">jquery.js</a></p>


    </div>

    <!-- FOUR -->

    <div>



    </div>






</body>
</html>

you can't. You can have only one version of jquery. If you want to provide backward support to some plugins then use jquery migrate plugin. — SachinGutte, Mar 28 '13 at 16:35
`noConflict` is exactly for this purpose. You should include the code you tried that didn't work. — James Montagne, Mar 28 '13 at 16:35
there is really no way to find these plugins in the same version of jquery (1.7) for example ? What plugins are u using ? — mlwacosmos, Mar 28 '13 at 16:37
Thanks for the help:) Yes I learned the hard way one can only run one version. — tidydee, Nov 28 '14 at 19:04

score 1 · Accepted Answer · answered Mar 28 '13 at 16:37

1

It should be pretty simple:

<script type='text/javascript' src='js/jquery.1.0.0.js'></script>  
<script type='text/jvascript'>
  var $jq1 = jQuery.noConflict();
</script>


<script type='text/javascript' src='js/jquery.2.0.0.js'></script>  
<script type='text/jvascript'>
  var $jq2 = jQuery.noConflict();
</script>


<script type='text/javascript' src='js/jquery.3.0.0.js'></script>  
<script type='text/jvascript'>
  $(document).ready(function() {
    console.log('constructed with jQuery 3.0.0');
  });
</script>

You however must make sure the right script is in the right scope, usualy you do something like:

$('#id').plugin();

this must be, for example:

$jq1('#id').plugin();

answered Mar 28 '13 at 16:37

Joshua - Pendo

4,331
6
37
51

Hi Pendo,Thank you for your answer. I don't understand your code. Could you help me by explaining it to me again please? I also included my code from my HTML file if that will help. Thank you! – tidydee Mar 28 '13 at 18:47
Well, the idea is pretty simple. `$jq2 = jQuery.noConflict();` creates a variable to use instead of the default `$` approach of jQuery. By using `$jq2` you would execute your code using version 2.0.0 according to the example. – Joshua - Pendo Mar 28 '13 at 19:10
Thank you! I will try this and let yo know how it went. – tidydee Mar 28 '13 at 20:55

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

Here is an example of changing the jQuery namespace. You can have the older version run on a different namespace to avoid conflict and confusion.

edited May 23 '17 at 12:11

Community

1
1

answered Mar 28 '13 at 16:37

Andrew Grothe

2,562
1
32
48

I included the broken file in my original post. I will also try to include the plugins in a separate HTML file for each. So you can see how they work. Let me knwo i fyou need me to include any other js/ css files. Thank you for all of your help! You are all Fantastic!!! – tidydee Mar 28 '13 at 18:26

How to run multiple versions of Jquery in one HTML

2 Answers2