How to include js file in ajax call?

Question

Hi All,

I am calling a ajax method to update a div. It contains links and functions which require java script files. But these methods and functions are not getting called properly as java script files are not getting included through ajax call. For example, i am trying to call a light box function, but it gets redirected to different page and not in light box.

Thanks in advance, Anubhaw Prakash

Answer 1

<script> tags written to innerHTML are not executed at write-time. You can do element.getElementsByTagName('script') to try to get hold of them and execute their scripts manually, but it's very ugly and not reliable.

There are tedious browser differences to do with what happens to a <script> element written to innerHTML which is then (directly or via an ancestor) re-inserted into the document. You want to avoid this sort of thing: just don't write <script>​s to innerHTML at all.

Then you also don't have to worry about executing scripts twice, which is something you never want to do with library scripts. You don't want to end up with two copies of a function/class that look the same but don't compare equal, and which hold hooks onto the page that don't play well with each other. Dynamically-inserted library scripts are a recipe for confusing failure.

Much better to include your scripts statically, and bind them to page elements manually after writing new elements to the page. If you really need to you can have your AJAX calls grab a JSON object containing both the new HTML to add and a stringful of script to execute.

Answer 2

May want to try running some prepatory javascript in the :before option to setup a variable with the correct files?

Answer 3

The Ajax framework in prototype will properly execute the text content of <script> tags, but will not import new script files via <script src="somefile.js"/>. The only solution I came up with is to import all javascript files I need in the head of the page. That way the functions in the imported file are available to the inline javascript code executed in the Ajax response.

Answer 4

1. include static scripts on pages that need to use them (IE contain a lightbox, then include the lightbox script)
2. Problem solved. Do not load scripts using AJAX
3. Make necessary function calls to the static scripts using AJAX callbacks

Answer 5

I had a similar problem, where I did want to postload some javascript. What I did is separating loading the html-fragment and loading the script into two calls. For loading the script I call the following function (I have JQuery handling the ajax part):

function loadModule(name, callback) {
    $.ajax({type: "POST"
          , url: "/js/" + name
          , dataType: "script"
          , success: callback
    });     
}