How to use multiple Jquery reference in single page
First question came to your mind, Is it possible to handle conflicts between 2 versions of jQuery loaded in the same page? The answer is yes,it is possible.
jQuery.noConflict() make it easy for developer to use multiple jquey reference on a single html page.
To use multiple Jquery library on a single page that you need is to add JQuery.noConflic() just after the Jquery library reference.
we’ll use it in our example.
Here we are loading version 1.9.0 and Just after it we are assigning $.noConflict() to a object jquery_1_9_0 (name should be any).
And to se this jquery reference we will use this object jquery_1_9_0 instead of $ Symbol.
In that way same we are adding another reference to our html page and use that new object instead of $ symbol.
<!-- load jQuery 1.9.0 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_9_0 = $.noConflict();
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict();
</script>
Below is another example that will clear your confusion.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
var $i = jQuery.noConflict();
// use $i instead of $ to use Jquery 1.8.3 version
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
// use $j instead of $ to use Jquery 1.9.1 version
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var $k = jQuery.noConflict();
// use $k instead of $ to use Jquery 1.4.2 version
</script>
How to use multiple Jquery reference in single page
Reviewed by CodiBucket
on
09:52
Rating:
No comments: