4

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.com, 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.com/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.com/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 recommended here Can I use multiple versions of jQuery on the same page? and it doesn't solve this issue.

Community
  • 1
  • 1
Emmett Butler
  • 5,969
  • 2
  • 29
  • 47

2 Answers2

10

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

Demo: jsFiddle

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);
Community
  • 1
  • 1
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • Thanks for illustrating the point that `appendChild` is an async call. Very helpful. – Emmett Butler Mar 01 '13 at 20:06
  • I guess I'm still wondering why loading the same version of jQuery that's already there breaks things on the page. Do you have insight there? – Emmett Butler Mar 01 '13 at 21:51
  • @EmmettJ.Butler Maybe loading two of the same version is killing the `$` variable. No idea. – ThinkingStiff Mar 02 '13 at 04:10
  • 1
    I've been reading a lot of SO answers, but none of them deal with your point about using an onload callback. I'd suggest though that you edit your answer showing how to retain a "hook" on the noConflict version of JQuery that is returned. I think line 3 should read: `var myJQVer = jQuery.noConflict( true );` – Steve Midgley Oct 04 '14 at 22:03
4

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

Simon the Salmon
  • 194
  • 1
  • 9