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);
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);
Related
I'm trying to run a plugin on CS Cart site which only allows jQuery 1.7+ http://owlgraphic.com/owlcarousel/ is the plugin i'm using.
I've found a snippet of code on another ticket, which allows to run two version of jQuery using the noConflict method. All of the original code is running fine. But this plugin is not running and it keeps throwing the error Uncaught TypeError: undefined is not a function on this line: $j("#wrapper").owlCarousel({ However if I add the following lin inside my document on load function it seems to run, then breaks when it gets to the .owlCarousel function. - $j('body').css('background-color', 'red');
Here is a breakdown of my code:
//Loaded n at the top of the page
{script src="lib/js/jquery/jquery.min.js"}
{script src="lib/js/jquery/jquery.min.1.8.js"}
<script>var $j = jQuery.noConflict(true);</script>
<script type='text/javascript'>
$(document).ready(function(){
console.log($().jquery); // This prints v1.5.2
console.log($j().jquery); // This prints v1.8
});
</script>
//Loaded in lower down the page, after most of the existing JS
<script type='text/javascript'>
$j(document).ready(function(){
$j('body').css('background-color', 'red');
$j("#wrapper").owlCarousel({
//autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 2,
itemsCustom : [
[200, 2],
],
navigation : true
});
});
</script>
The strange thing is, if i replace the old version of jQuery with the new one, it works, but breaks all the old code that relies on the old version.
I hope I've provided enough info.
Thanks in advance.
jQuery plugins normally hooks to the current jquery version attached to it, first load the old jquery version then the plugin that will be using it then, load the newer one.
I believe that the "plugin1" will be attached to the older version of jquery.
{script src="lib/js/jquery/jquery.min.js"}
<script>var j1 = jQuery.noConflict(true);</script>
{script src="lib/js/jquery/plugin1.js"}
{script src="lib/js/jquery/jquery.min.1.8.js"}
<script>var j2 = jQuery.noConflict(true);</script>
{script src="lib/js/jquery/plugin2.js"}
{script src="lib/js/jquery/plugin3.js"}
sorry for my english.
I have this piece of JS:
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
But it doesn't seem to work on my website even though it works fine on JSFiddle
I used "http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"
But didn't work.
I don't have any other Script on my website as I've just started it.
Is it just a case of using the wrong plug-in?
UPDATE
This is my full code:
http://jsfiddle.net/WeQwc/9/
You need jQuery, not jQueryUI.
http://code.jquery.com/jquery-latest.min.js
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
var count = $(".parent a").length;
$(".parent div").width(function(){
return ($(".parent").width()/count)-5;
}).css("margin-right","5px");
});
</script>
Just to clarify why this works, surrounding your jQuery code with the $(function(){...}); means that it will only be run once the page has finished loading. So if you are acting on html elements, this is kinda useful. You will notice that your jFiddle JavaScript is run "onLoad", the reason it worked :)
Currently you are using only the jQuery UI js file
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
You need to use the core jQuery min js file first and then the jQuery UI js file.
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
I have a script src for a deprecated version of JQuery which I cannot control (controlled externally via a CMS, not cross-domain, just no access to changing it) and I'd like to change the script src to a newer version of Jquery.
Old code:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
Replace with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Once an external script has loaded, it can't be removed as it's already loaded into memory, so changing the source would just load another version of jQuery without removing the first version, so you'd have two versions of jQuery, creating a conflict, and in many cases nothing will work.
There is a workaround if you absolutely have to:
$(function() {
$j_142 = $.noConflict(true);
$j_142.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
$j_191 = $.noConflict(true);
});
});
FIDDLE
now you have two versions of jQuery mapped, and to use them you'd do:
$j_191('#selector')
of course, this would cause issues with code already written, but you could probably get away with just mapping the second script to a new variable or something ?
EDIT:
You could use a closure to map one of those values back to the dollarsign within the closure:
(function($) { //anonymous self invoking function
// now you could use the dollarsign as normal
$(function() { // document ready function
});
})($j_191);
You can use
var oldJquery = document.querySelectorAll('script[src="js/jquery-1.4.2.min.js"]');
oldJquery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
Once you do this, it will automotically will download coz it is live dom element. All changes should be reflected immediately.
But I would suggest that long term this is not good idea. what if CDN from google is down.
You might be in trouble. Just take precaution while doing this changes.
That easy, this is your code:
$("script[src='js/jquery-1.4.2.min.js']").attr('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js');
This is example http://jsfiddle.net/rebeen/KwLM3/
One of the scripts added in between the <head> element kills my other javascript. Is their a way to isolate it or not to interfere with other scripts? I need this only for one page, not for the whole site ,etc. frontpage.php. Tried to add the script only to this page, but it dont work, as it seems what it only works than I put in between <head></head> elements.
This is the killer script:
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
<!-- THE ACTIVATION OF THE MINI IMAGE SLIDER PLUGIN -->
jQuery('#first_mini_slider').minislides(
{
width:980,
height:320,
slides:5,
padding:30,
ease:'easeOutQuint',
speed:400,
hidetoolbar:2000,
animtype:1,
mousewheel:'on'
})
<!-- THE ACTIVATION OF THE LIGHTBOX PLUGIN -->
jQuery('.freshlightbox').fhboxer({})
jQuery('.freshlightbox_round').fhboxer({
hover_round:"true"
})
});
</script>
The script you posted puts jQuery into "noConflict" mode, which means that the $ used to refer to jQuery will no longer work. You can still refer to jQuery with jQuery i.e. these two are equivilent:
$('.freshlightbox')
jQuery('.freshlightbox')
If this is what is causing problems with your other scripts you can do one of the following:
don't put jQuery into noConflict mode
change your other scripts to use jQuery instead of $
put the following code around your other scripts:
(function($){
// your code goes here
})(jQuery);
more detail on the last here: https://stackoverflow.com/a/4484317/12744
<script type="text/javascript" src="framework/resources/jquery-1.5.1.js"></script>
<script type="text/javascript">
var blink = function() {
$('#blink').toggle();
};
</script>
Throws an error saying
$ is not a function
When using an external JavaScript file which gets referred after jQuery I can only seem to use jQuery within the ready function. Is there something I should know about using jQuery in this manner?
That error means jquery isn't loaded
jQuery may be conflicting with another definition, the fact that you can use it in the ready function seems to indicate that it is at least loaded. Have you tried using:
<script type="text/javascript" src="framework/resources/jquery-1.5.1.js"></script>
<script type="text/javascript">
var blink = function() {
jQuery('#blink').toggle();
};
</script>
Sometimes it is cleaner to go direct to the object. If you find that resolves your problem you may wish to switch to noConflict mode which is described in more detail in the docs here:
http://api.jquery.com/jQuery.noConflict/
Hope that helps.
Have you referenced jQuery as the first script in your page? Does the path exist? Try using Google's, just to test:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
It seems that jQuery is conflicting with any existing javascript library.
I hope this link might help.