Loading Multiple jQuery Versions

Question

I\'ve written a tool that uses jQuery, and the tool is dynamically loaded on many different web pages, including ones that already use jQuery. I am trying to load jQuery on

Answer 1

I have a quite similar issue on my webapp, there is a way to keep the previous version and use your own, even with plugins, here is what I do:

<!-- USING A NEWER VERSION OF JQUERY -->

<!-- store and protect the old one -->
<script>
var oldJQuery = jQuery.noConflict();
</script>

<!-- load the new version and required plugins -->
<script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../script/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../../script/jquery.hammer.js"></script>
<script type="text/javascript" src="../../script/jquery.xml2json.min.js"></script>

<!-- store and protect the new one and put the old one back -->
<script>
var jQuerX = jQuery.noConflict();
jQuery = oldJQuery;
</script>

it keep the old version unchanged, and you can use yours under the chosen alias (jQuerX).

Answer 2

You need to allow the dynamically loaded copy of jQuery to finish loading before calling .noConflict(). Use the onload event on <script>.

Demo:

Script:

var script = document.createElement( 'script' );
script.onload = function () {
    jQuery.noConflict( true ); //remove this and image load fails
};
script.src = 'http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2';
document.head.appendChild(script);