Though it is not recommended to use multiple versions of jQuery together in same page, but it sometimes becomes a pressing need for developers to use more than one versions of jQuery on same page. This situation might occur in a scenario where a thrid party plugin is dependent on a particular version on jQuery, and you might simultaneously want to use a latest feature of the jQuery. Thus to enjoy the both worlds you would need to use more than one versions of jQuery.
The following simple steps shows how to do it:
Add a jQuery version to your page and create an alias of it as below:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
| <script> | |
| var $jq191 = jQuery.noConflict(); | |
| </script> |
Next, add the other jQuery version and similarly create another alias:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="http://code.jquery.com/jquery-1.6.2.js"></script> | |
| <script> | |
| var $jq162 = jQuery.noConflict(); | |
| </script> |
Finally, use the individual aliases to use that particular jQuery version:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="displaybox"></div> | |
| <script> | |
| var $displaybox1 = $jq191( "#displaybox" ); | |
| $displaybox1.append( "Printed using jQuery version ($): " + $jq191.fn.jquery + "<br>" ); | |
| var $displaybox2 = $jq162( "#displaybox" ); | |
| $displaybox2.append( "Printed using jQuery version ($): " + $jq162.fn.jquery + "<br>" ); | |
| </script> |
Full code example given below:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | |
| <script> | |
| var $jq191 = jQuery.noConflict(); | |
| </script> | |
| <script src="http://code.jquery.com/jquery-1.6.2.js"></script> | |
| <script> | |
| var $jq162 = jQuery.noConflict(); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="displaybox"></div> | |
| <script> | |
| var $displaybox1 = $jq191( "#displaybox" ); | |
| $displaybox1.append( "Printed using jQuery version ($): " + $jq191.fn.jquery + "<br>" ); | |
| var $displaybox2 = $jq162( "#displaybox" ); | |
| $displaybox2.append( "Printed using jQuery version ($): " + $jq162.fn.jquery + "<br>" ); | |
| </script> | |
| </body> | |
| </html> |
0 comments:
Post a Comment