Adding jQuery At Run Time

Question

PaliGap 0 Newbie Poster

11 Years Ago

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?

javascript jquery

4 Contributors
8 Replies
237 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by PaliGap

All 8 Replies

GliderPilot 33 Posting Whiz

11 Years Ago

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 11 Years Ago by GliderPilot

EvolutionFallen 107 Junior Poster

11 Years Ago

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>

Reply to this topic

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.

PaliGap 0 Newbie Poster · Answer 1 · 2012-12-12T18:13:00+00:00

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.

GliderPilot 33 Posting Whiz · Answer 2 · 2012-12-12T18:32:23+00:00

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

PaliGap 0 Newbie Poster · Answer 3 · 2012-12-12T21:19:22+00:00

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

fobos 19 Posting Whiz in Training · Answer 4 · 2012-12-13T00:51:32+00:00

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>

EvolutionFallen 107 Junior Poster · Answer 5 · 2012-12-13T18:54:57+00:00

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.

PaliGap 0 Newbie Poster · Answer 6 · 2012-12-15T13:31:26+00:00

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)

Adding jQuery At Run Time

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers