CODEWITHSUNDEEP
javascriptjquery
Vinay
Vinay

Reputation: 405

JQuery - multiple versions on the same page - breaking functionality

Have a requirement to load custom Javascript on a page after it has finished loading i.e. using a third party tool we get to execute on live pages on the website after the page loads.

Coming to the issue now, the page has a lot of Javascript dependent elements which have been coded using jquery version 1.6.2. The runtime script that I need to execute needs jquery version 1.10.x. See code below.

$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');

As soon as the first line of code is applied, the original functionality on the page breaks because of some conflict of the existing code with Jquery version 1.10.x.

So, I tried using noConflict as suggested on other questions like this : 

$('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
var $j = jQuery.noConflict(true);    
$('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');

In addition, I changed the file 'mycustom.js' to use $j instead of $ for jquery. But I still have the same problem. How do I prevent the JQuery 1.10.x from breaking the existing page.

Thanks in advance.

[EDIT]

Using Austin's suggestion, was able to tweak the timing of the libraries getting loaded. Below code works now.

var $jQuery1_6_2 = jQuery.noConflict(true);
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
$jQuery1_6_2('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
setTimeout(function(){
    $jQuery1_10_2 = jQuery.noConflict(true);
    $ = $jQuery1_6_2;
    jQuery = $jQuery1_6_2;

    //Logic to use Jquery 1.10 using '$jQuery1_10_2'

}, 1000);

Upvotes: 0

Views: 116

Answers (1)

user2033671
user2033671

Reputation:

Try no conflicting the 1.6.2 then loading up the new version, then reseting the reference to $ to 1.6.2

var $jQuery1_6_2 = jQuery.noConflict(true);
(function($) {
    $('body').append('<script type="text/javascript" src="http://www.mywebsite.com/min/lib/jquery-1.10.2.js"></script>');
    $jQuery1_10_2 = jQuery.noConflict(true);
    $('body').append('<script type="text/javascript" src="http://www.runtimetool.com/mycustom.js"/>');
})($jQuery1_6_2);
$ = $jQuery1_6_2;

then in your script file

(function($){

})($jQuery1_10_2);

Upvotes: 2

Related Questions