How can I dynamically add external scripts using jQuery?

Question

I thought that I could just use jQuery's .append() and add them to the head, but that doesn't seem to be working for my external scripts (Knockout.js).

Here's my code that runs when the page loads. It seems to be working for the stylesheet, but not for the external scripts.

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.0') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://code.jquery.com/jquery-1.8.0.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

function main() { 
        jQuery(document).ready(function($) {
            $("head").append("<script type='text/javascript' src='http://knockoutjs.com/js/jquery.tmpl.js'></script>");
            $("head").append("<script type='text/javascript' src='http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js'></script>");
            $("head").append("<link href='style.css' rel='stylesheet' type='text/css' />");

            // Then it appends the necessary HTML code [...]
        });
    }

Here's my test environment where you can see my current code in action with Firebug.

Here's what I'm seeing in Firebug after the page loads:

enter image description here

EDIT: It looks like it's having issues with the Knockout.js scripts in my code, so I'll look into those. Thank you for the comments and answer regarding dynamic scripts. I learned something :)

Check [this answer](http://stackoverflow.com/a/611016/520779) to a related question. I don't know why it would be different, appending through jQuery or using vanilla JavaScript, but apparently it is. I've had success with the latter, never actually tried the former... — mgibsonbr, Nov 19 '12 at 17:59

score 8 · Accepted Answer · answered Nov 19 '12 at 17:58

8

Have you tried jQuery.getScript() ? It basically loads a script from the server and then executes it.

 $.getScript("yourScript.js", function(){});

answered Nov 19 '12 at 17:58

alemangui

3,571
22
33

Is 'yourScript.js' the external ones in this case? – Jon Nov 19 '12 at 18:00
1

Yes, you can load external ones. – alemangui Nov 19 '12 at 18:00
Hmm, this still doesn't seem to be doing it. Maybe I have an error somewhere else in my code. – Jon Nov 19 '12 at 18:02
You probably won't see it in the document's , but I believe you can use it, can't you? – alemangui Nov 19 '12 at 18:04
I suppose it could still be there, but it's just not showing up in the head. It's not making it through my Knockout.js code, so there might be an error elsewhere. I'll look into it. – Jon Nov 19 '12 at 18:05
The js file is loaded asynchronously. If you have the knockut.js-dependant instructions just after it may not give enough time for the download to take place. Try putting that code inside the callback function of the $.getScript() method. – alemangui Nov 19 '12 at 18:09
Looks like the scripts are going in, but I'm just having issues with my Knockout.js initialization. Thanks for the help! – Jon Nov 19 '12 at 18:18
Correct, but this isn't really the best solution. You don't want jQuery loading dependencies. You want to use Dependency Injection with a modular system. I'd recommend AngularJS. – Andrew Rhyne Nov 19 '12 at 18:33

score 1 · Answer 2 · answered Nov 19 '12 at 17:57

1

Try to add scripts this way, I have seen that issue before in some browsers.

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = script_url;
$("head").append( script );

answered Nov 19 '12 at 17:57

Gurpreet Singh

20,907
5
44
60

dualed · Answer 3 · 2012-11-19T18:59:40.850

0

According to this jQuery API pages comment here, this behavior is perfectly normal, as jQuery cleans up the DOM after you

Your code is executed (if URL is correct, and XSS is not blocked) whether you fetch it by $.append()ing it or use $.getScript().

However, loading your site gives me at least ~~three~~ two solid errors. You might want to work on those.

The errors:

ReferenceError: $ is not defined
search.js
Line 54

and

TypeError: jQuery is undefined
http://knockoutjs.com/js/jquery.tmpl.js?_=1353351345859
Line 7

edited Nov 19 '12 at 18:59

answered Nov 19 '12 at 18:12

dualed

10,262
1
26
29

Errors? I put in three alerts to see how far the code was getting. That could've been it. – Jon Nov 19 '12 at 18:15
@Jon I updated the answer with the errors, though I think it's odd that you don't see them. – dualed Nov 19 '12 at 19:00

score -1 · Answer 4 · answered Nov 19 '12 at 18:32

-1

You should use something like AngularJS if your application is this complex. Otherwise you are reinventing the wheel.

answered Nov 19 '12 at 18:32

Andrew Rhyne

5,060
4
28
41

How can I dynamically add external scripts using jQuery?

4 Answers4