Loading javascripts in ajax callbacks

Question

Situation: I send an ajax request that returns HTML containing elements needing event handlers to be set on them. The code that sets the handlers for these elements is contained in a separate javascript file.

I have been using the following code to load the required js files on callback by scripting the <head> tag. I have not had problems so far, but was wondering if this is a safe and reliable approach (especially cross-browser).

function ajax_callback(response) {
    document.getElementById('dom_id_to_update').innerHTML = response;
    import_js('/path/to/js/file/');
}

function import_js(src) {
    var scriptElem = document.createElement('script');
    scriptElem.setAttribute('src',src);
    scriptElem.setAttribute('type','text/javascript');
    document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

Thanks, Brian

T.J. Crowder · Accepted Answer · 2010-04-27 16:19:18Z

1

Yup. You can even remove the script element immediately after adding it (though you may want to keep it around to avoid re-loading later — e.g., by looking at what script tags are in head); apparently just the act of adding it is all that's required to get the code loaded and parsed. More here (that page is from the Prototype unofficial wiki, but it's applicable regardless of whether you're using Prototype).

answered Apr 27, 2010 at 16:19

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

Zach B · Accepted Answer · 2010-04-27 16:32:57Z

1

It doesn't look like you're using jQuery which is too bad, because there is a function, live , that specifically deals with this case. The live function attaches a handler to all elements that match the selector now and in the future. So no matter when your new elements are appended to the page the handler will be automatically attached, without you having to load new scripts.

You can see the documentation and examples here: http://api.jquery.com/live/

answered Apr 27, 2010 at 16:32

Zach B

9371 gold badge6 silver badges9 bronze badges

1 Comment

T.J. Crowder Over a year ago

They'd have a handler attached, but presumably not the right one. I'm assuming he has a reason that he has to load an external script, rather than just referencing functions in his existing script as he would with live (or any other form of event delegation; it's not unique to jQuery).

Collectives™ on Stack Overflow

Loading javascripts in ajax callbacks

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related