CODEWITHSUNDEEP
javascriptjqueryhtml
user2249079
user2249079

Reputation:

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

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>

Upvotes: 2

Views: 1692

Answers (3)

net.uk.sweet
net.uk.sweet

Reputation: 12431

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.

Upvotes: 5

Richard
Richard

Reputation: 279

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>
// ...

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

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 $

Upvotes: 3

Related Questions