Member Avatar for PaliGap

I'm trying to see how to load jQuery at run time. I can't understand why the following code doesn't work (probably me making a silly error)

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var script = document.createElement('script');
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
<a href="#" id="main">click me</a> 
<script>
$('#main').click(function(){ alert('hi'); });
</script>
</body>
</html>

When I run this, '$' is not defined. What am I doing wrong?

  • 4 Contributors
  • 8 Replies
  • 266 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by PaliGap
Member Avatar for GliderPilot

More than likely the script in the body of your page is trying to run prior to the jQuery being loaded. Try putting it in an onload function and adding a type:

script.type = 'text/javascript';
script.onload=scriptLoaded;
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);

function scriptLoaded {
  $('#main').click(function(){ alert('hi'); });
}

That being said I see no advantage of loading jQuery at run time. If you're going to use jQuery why not just include it originally.

Edited by GliderPilot
Member Avatar for PaliGap

Adding a type? But this is HTML5 where a type should not be necessary?

Also, I'm afraid your lines 6-8 above show an error when loaded in Dreamweaver.

However this fixes THAT problem:

function scriptLoaded() {
$('#main').click(function(){ alert('hi'); });
}

Unfortunately, these changes do not solve the problem.

You may very well ask "If you're going to use jQuery why not just include it originally". But then, the answer to that is: I have my reasons! I'm looking for a solution, not therapy.

Member Avatar for GliderPilot

Sorry I missed the brackets, it happens. Anyways, good luck.

Member Avatar for EvolutionFallen

GliderPilot's suggestion worked for me. Did you remove the <script> element in the body? Here's the full code that works for me:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload=scriptLoaded;
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
function scriptLoaded() {
  $('#main').click(function(){ alert('hi'); });
}
</script>
</head>
<body>
<a href="#" id="main">click me</a> 
</body>
</html>
Member Avatar for PaliGap

Thanks EvolutionFallen (and GliderPilot). Yes that does work. Though I'd like to understand why the original code does not work.

As the browser loads the HTML, the Javascript should attach a "load jQuery" instruction to the head, no? This is before the browser attempts to use "$"? Yet it seems that GliderPilot is correct in saying "the script in the body of your page is trying to run prior to the jQuery being loaded".

Member Avatar for fobos

I believe because you didnt have

script.onload=scriptLoaded;

on your first post.
you could also include the script

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#main').click(function(){ alert('hi'); });
})
</script>
Member Avatar for EvolutionFallen

I'd like to understand why the original code does not work

While the browser will read the HTML for the jQuery include first, it looks like it doesn't actually pull in external resources (the library hosted at Google APIs) until after the rest of the HTML/JS is read. This makes sense, as this way gets the structure of the page up and available to the user as soon as possible.

Therefore, you need to make the execution of your event handler script wait until after the external document has been loaded, so it can use the jQuery code.

Member Avatar for PaliGap

Uh-oh. Turns out that you can't use "script.onload=scriptLoaded;" in IE < version 9.

But it seems there is a fix:

s = document.createElement("script");
s.src="myscript.js";
if(s.addEventListener) {
  s.addEventListener("load",callback,false);
} 
else if(s.readyState) {
  s.onreadystatechange = callback;
}
document.body.appendChild(s);
function callback() { console.log("loaded"); }

http://www.microsoft.com/en-us/download/details.aspx?id=11575

(An alternative is to use a 'blocking' strategy with document.write: http://blog.arkesystems.com/post/2010/08/12/Gotchas-when-loading-jquery-from-a-CDN.aspx)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.