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 a web page that is out of my direct control. When I do so, Ajax calls that this page makes via jQuery stop working. The site, dailycaller, uses jQuery lazy image loading - when you scroll down the page, article images are dynamically loaded. When I attempt to load any jQuery version, this dynamic image fetching breaks. I suspect this is due to a version conflict between my loaded jQuery and the jQuery already on the page itself.

To test this, I tried loading the same version as the page does. The page includes a script tag

<script type='text/javascript' src='.js?ver=1.7.2'></script>

My JS code loads this version again (asynchronously, after the pageload), with

var script = document.createElement( 'script' );
script.src = '.js?ver=1.7.2';
document.body.appendChild(script);

Even though this version of jQuery is, in theory, already on the page, this load causes the page's jQuery Ajax calls to break. How can I load an arbitrary jQuery version without breaking this page's dynamic loads?

I have tried using jQuery.noConflict() as remended here Can I use multiple versions of jQuery on the same page? and it doesn't solve this issue.

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 a web page that is out of my direct control. When I do so, Ajax calls that this page makes via jQuery stop working. The site, dailycaller., uses jQuery lazy image loading - when you scroll down the page, article images are dynamically loaded. When I attempt to load any jQuery version, this dynamic image fetching breaks. I suspect this is due to a version conflict between my loaded jQuery and the jQuery already on the page itself.

To test this, I tried loading the same version as the page does. The page includes a script tag

<script type='text/javascript' src='http://cdn01.dailycaller./wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

My JS code loads this version again (asynchronously, after the pageload), with

var script = document.createElement( 'script' );
script.src = 'http://cdn01.dailycaller./wp-includes/js/jquery/jquery.js?ver=1.7.2';
document.body.appendChild(script);

Even though this version of jQuery is, in theory, already on the page, this load causes the page's jQuery Ajax calls to break. How can I load an arbitrary jQuery version without breaking this page's dynamic loads?

I have tried using jQuery.noConflict() as remended here Can I use multiple versions of jQuery on the same page? and it doesn't solve this issue.

• javascript
• jquery
• ajax

• Why do you need to load two versions at the same time? – JJJ Commented Mar 1, 2013 at 17:33
• see edit - I have a tool that uses jQuery and requires the latest version. It should be loadable from an arbitrary site. – Emmett Butler Commented Mar 1, 2013 at 17:35

2 Answers 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./wp-includes/js/jquery/jquery.js?ver=1.7.2';
document.head.appendChild(script);

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