AJAX + dynamically adding java script function to the page

Question

I am loading a portion of page using AJAX calls, which may contain script functions defined in them . Which are attached with the controls being loaded with different events. Now the problem is that when those events triggered i got the error "object not found" which indicate the function is not found/defined. While using Firebug i can see that the function is defined and available. So how can i make sure that browser can find the respective function.

I tried but either i am missing some thing or either its not working, Here is what i am doing

       Page
           --->Partial View A
                  ----->Partial View B

Now Page Loads Partial A with Ajax Calls which further loads Partial B with Ajax Calls.Both Partial A & B contains few java script function that logically only associated with them not with master page. The pages loads fine except the functions could not execute as "Object Not Found" comes in.

Answer 1

If you are using a framework or library you have to set a parameter in order to evaluate the script present in the response of the ajax request. It's usualy called evalScripts

evalScripts:true

You can also use the callbacks (success/error) of the request to trigger the events, so that it's easier to keep the code in one place and to avoid situations like this.

If you are using plain javasciprt and the XmlHttpObject, then you have to manually find all the script tags in your response and then eval() them.

Answer 2

You should define functions using this syntax:

myFunction = function(foo) {}

not this syntax

function myFunction(foo) {}

The second form won't work when eval()'d (which is probably what's happening)