Cannot call a user defined JS function after return the AJAX content

Question

I am having a problem of calling the user defined JS function after I make the AJAX call. Basically, I created couple radio buttons on the main html page. When the user clicks on one of the radio button, it will trigger the AJAX call and return another html file in the "div" content that I set in the main html page. The other html file contains a user defined JS function (eg "updateContent()") which use the onclick event handler to call the function. When I'm running the app, and click on the button. I had seen the firebug was complaining the "updateContent() is not defined" error. The function itself works fine and must be defined properly. Please help me about this! Thanks.

Answer 1

The magic Google words here are "JSON-P" and the " On Demand Javascript " pattern. Basically, instead of loading a chunk, you create and load a tag. Then the javascript gets interpreted, your function is defined, the nail is found, the horse is shod and the kingdom is not lost.

Answer 2

This is because the js code you insert via innerHTML never will be executed. You might need to extract it from the HTML code run it through eval . PrototypeJS have a configuration option to do this automatically.

I would recommend you to separate out the js code and include it with the rest of your js code.