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 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
– mgibsonbr, Commented Nov 19, 2012 at 17:59

alemangui · Accepted Answer · 2012-11-19 17:58:46Z

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, 2012 at 17:58

alemangui

3,66526 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jon Over a year ago

Is 'yourScript.js' the external ones in this case?

alemangui Over a year ago

Yes, you can load external ones.

Jon Over a year ago

Hmm, this still doesn't seem to be doing it. Maybe I have an error somewhere else in my code.

alemangui Over a year ago

You probably won't see it in the document's <head>, but I believe you can use it, can't you?

Jon Over a year ago

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.

|

Gurpreet Singh · Accepted Answer · 2012-11-19 17:57:22Z

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, 2012 at 17:57

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

Comments

dualed · Accepted Answer · 2012-11-19 18:59:40Z

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, 2012 at 18:59

answered Nov 19, 2012 at 18:12

dualed

10.5k1 gold badge28 silver badges30 bronze badges

2 Comments

Jon Over a year ago

Errors? I put in three alerts to see how far the code was getting. That could've been it.

dualed Over a year ago

@Jon I updated the answer with the errors, though I think it's odd that you don't see them.

Andrew Rhyne · Accepted Answer · 2012-11-19 18:32:34Z

-1

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

answered Nov 19, 2012 at 18:32

Andrew Rhyne

5,0705 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

How can I dynamically add external scripts using jQuery?

4 Answers 4

8 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related