how do i use multple jquery version on the single page?

Question

How do I use multiple jquery version on a single page? I have two different jquery version and both are necessary for different functions but both versions are conflicting each other.if i will use jquery noconflict then products scripts won't be work?

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
oldjq = jQuery.noConflict(true);
</script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

Jquery 1.9.1 Need To Run This Script

<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); 
}else{
$inputs.prop('disabled',false);
}
})
})
</script>

<input type="checkbox">
<input type="checkbox"> 
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />

Jquery 1.4.2 Need To Run These Scripts

<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>

Problem is Solved Now Here THe Final COde

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
})
});
})(jQuery);
</script>

<script type="text/javascript"  
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>

Sounds messy! But here's a possible duplicate: http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page — showdev, Apr 16 '13 at 23:32
@showdev not possible duplicate both are different question? please read it what i asked `How do I use multiple jquery version on a single page? I have two different jquery version and both are necessary for different functions but both versions are conflicting each other.if i will use jquery noconflict then products won't be work?` — , Apr 16 '13 at 23:35
Oh, you don't want to use `noConflict`. In that case, you might be out of luck. It's impossible for two jQuery references to be separate but also not separate. — showdev, Apr 16 '13 at 23:36
Why not just amend the code which requires jQuery 1.9.1 so that it works with jQuery 1.4.2? It's only a few lines of code. — net.uk.sweet, Apr 16 '13 at 23:39
If you can identify which scripts are not working with the new jQuery, you can probably find updates or alternatives that will. For example, `cloud-zoom` 3.0 works with jQuery versions 1.4.3 - 1.9.1. — showdev, Apr 16 '13 at 23:44
In reference to your update with the solution I have to ask, why force the user to download jquery twice? — net.uk.sweet, Apr 17 '13 at 00:11

net.uk.sweet · Answer 1 · 2013-04-17T01:06:48.233

Since it's only a few lines of code, I would suggest amending the chunk which requires jQuery 1.9.1 so that it works with jQuery 1.4.2

I've updated it below to work with jQuery 1.4.2. I use the attr method rather than prop to manipulate the disabled property (you can check the docs here to see if this is likely to cause any issues). This solution avoids running two instances of jquery and avoids having to find updated versions of all the libraries / plug-ins you're already using.

$(document).ready(function () {
    $('input:checkbox').click(function(){
        var $inputs = $('input:checkbox')
        if($(this).is(':checked')){
            $inputs.not(this).attr('disabled',true); 
        }else{
            $inputs.attr('disabled',false);
        }
    })
})

See fiddle here.

score 3 · Answer 2 · answered Apr 16 '13 at 23:32

3

Yes, after you load your first version, do this

var $j = jQuery.noConflict();

Load your second version of jQuery.

Refer to the first version with $j and the second as $

answered Apr 16 '13 at 23:32

tymeJV

103,943
14
161
157

1

Well assuming the code wasn't designed for two versions, some refactoring will be necessary. This is simply the way to work with two different versions of jQuery. – tymeJV Apr 16 '13 at 23:35
3

You should use $ for later scripts and $j for earlier ones, then it will work. The technical solution is simple, but you are wrong in the premise - you don't need two jQuery instances, you just need to learn more. – Richard Apr 16 '13 at 23:38
@edgematrix You will have to modify one or the other to reference the new `$j`. Might be easier to either to modify the first block to work with the older version of jQuery, or modify your products scripts to work with the newer version of jquery. This is common place with jquery: 1)Jquery has new things you want to use. 2)You have to decide whether the new things are worth upgrading and testing+fixing old code to work with newer version of jquery. I would advise against trying to support two different versions of jquery. Fix your old code, or do without the newer features. Just my opinion. – AaronLS Apr 16 '13 at 23:39
@Richard +1 for not needing two instances. Better off consolidating and updating old scripts as necessary to make them all work with the same jQuery instance. – showdev Apr 16 '13 at 23:39
@richard any kind of example? – Apr 16 '13 at 23:40
@edgematrix `$(document).ready(function () {` -> `$j(document).ready(function () {` and same for all other jquery $ in that first code block. Not sure that's the example you wanted. Going the better route of fixing old code, we don't have enough information to help you there. You will need to troubleshoot, step through code and identify what deprecated features you are using in the old code. – AaronLS Apr 16 '13 at 23:46
You mean example how to use two jQuery instances on one page, or example how to learn more javascript? – Richard Apr 16 '13 at 23:46
@Richard i have posted the code but i'm confused on it please help me thanks `` – Apr 16 '13 at 23:47
Look to net.uk.sweet - he posted correct solution. If you don't want to refactor legacy code to new jQuery (and it is easy, I have done it many times), just keep your new code compatible with 1.4, that's not that difficult. – Richard Apr 17 '13 at 00:02

Richard · Answer 3 · 2013-04-17T00:21:45.940

0

OK, here is one possible solution - you could bind new version of jQuery to the closure. But my advice is DON'T DO THAT, it is like shooting yourself to your own leg.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// Jquery 1.9.1 Need To Run This Script:
<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            // code that uses jQuery 1.9.1
        });
    })(jQuery);
</script>

// ...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
//Jquery 1.4.2 Need To Run These Scripts:
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
// ...

edited Apr 17 '13 at 00:21

answered Apr 16 '13 at 23:58

Richard

279
2
9

Why is it like shooting yourself in the leg? – net.uk.sweet Apr 17 '13 at 00:06
Because in long term, it causes much more trouble. There are two correct solutions: refactoring or writing new code with old API. Both are less risky and not so difficult. – Richard Apr 17 '13 at 00:09
I'm not challenging you, just interested. I thought there might be some fundamental issue with the approach which you've suggested which I didn't understand. So is the trouble you identify over the long-term simply issues with maintaining two versions of jquery? – net.uk.sweet Apr 17 '13 at 00:15
Not only. The main issue is confusion, because you need to keep track, which code uses which API. This usually leads to quite nasty bugs that are hard to spot and repair. – Richard Apr 17 '13 at 00:17
@richar can you tell me now how do i use this script with` if($(this).is(':checked')){ $inputs.not(this).prop('disabled',true); // <-- disable all but checked one }else{ $inputs.prop('disabled',false);` `$('input:checkbox').screwDefaultButtons({ image: 'url("images/checkboxSmall.jpg")', width: 43, height: 43 }); ` – Apr 17 '13 at 00:18
Oh sorry, I had a wrong comment there, i fixed it, is it now clear? You place the code with new API to the inline javascript block (replace the comment "code that uses jQuery 1.9.1") – Richard Apr 17 '13 at 00:23

how do i use multple jquery version on the single page?

3 Answers3

Linked