I've got a script that I'm trying to modify so that I don't load the jQuery library if its already present. However, the only way I can get things to work is example 1 below (explictly loading the jQuery library). When I try to conditionally load it, the slider does not work...
Example #1 - the slider works fine in this example (but jQuery may be loaded multiple times)
<head>
<script type='text/javascript' src='scripts/js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
<script type='text/javascript'>
jQuery(document).ready(
function(){
jQuery('#accordion-1').slider({
autoStart:true,
slideInterval:5000,
slideNum:false
});
})
</script>
</head>
Example #2 - Trying to dynamically load jQuery. Slider does not work.
<head>
<script type='text/javascript'>
if (typeof jQuery == 'undefined') {
// jQuery is not loaded => load it:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
document.getElementsByTagName('body')[0].appendChild(script);
}
</script>
<script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
<script type='text/javascript'>
jQuery(document).ready(
function(){
jQuery('#accordion-1').slider({
autoStart:true,
slideInterval:5000,
slideNum:false
});
})
</script>
</head>
Example #3 - This does not work either...
<head>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));
}
</script>
<script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
</head>
4 Answers 4
The problem is that you are appending the jQuery script to the end of the body. This is after the script elements that use jQuery. That obviously won't work, since scripts are evaluated sequentially.
You should use document.write instead (one of the rare occasions where that is correct):
document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));
The unescape code is the easy way around the fact that </script> will cause errors if inserted directly into Javascript.
This code inserts the script tag right at the current point in the document. (Credit to this SO answer.)
1 Comment
You have to basically wait for the script to load. Please take a look at the below code.
<script type='text/javascript'>
function initSlider(){
jQuery(document).ready(
function(){
jQuery('#accordion-1').slider({
autoStart:true,
slideInterval:5000,
slideNum:false
});
})
}
if (typeof jQuery == 'undefined') {
// jQuery is not loaded => load it:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
script.onreadystatechange= function () {//This is for IE
if (this.readyState == 'complete'){ initSlider(); };
}
script.onload= initSlider;//This is for Non-IE
document.getElementsByTagName('body')[0].appendChild(script);
}
</script>
1 Comment
Instead try:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js";
document.body.appendChild(script);
Comments
document.getElementsByTagName('body')[0].appendChild(script);
Won't work before your body element has been added to the DOM. Try just:
<script type="text/javascript">
if(!window.jQuery)
document.write('<script src="jquery.js.php"><\/script>');
</script>