The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Javascript inside of ajax created page....

Hey guys,

I've run into this a few times and have never found a way to deal it. Basically I'm building a user administration cms using mostly ajax calls to admin modules. It works great but I'm running into a huge problem that I need to figure out how to fix, (if possible).

As the title says the issue is including and executing javascript code inside a page that gets called via ajax. One specific example of the problem I'm having is creating sortable lists with scriptalacous. It works great if I access the page directly, but if I access the page using an ajax call the javascript of the page doesn't seem to fire. I'm not sure if it's possible to work around this problem but it seems like it should be a fairly common issue with ajax aps so hopefully someon out there can help.

You don't call pages using Ajax, you load new content into the current page using Ajax. If the content you are adding into the current page needs to use new JavaScripts then you need to download and then call those scripts in order to run them. If the script isn't running after the page update then either you are not downloading the extra JavaScript or you are not running it from the code that finishes loading the new content into the page.

You don't call pages using Ajax, you load new content into the current page using Ajax.

Symantics are hardly worth mentioning as I'm sure you understood what I meant. For clarification I am making an asynchronous call to the server to request a page which is then included in the current document as content.

Originally Posted by felgall

If the content you are adding into the current page needs to use new JavaScripts then you need to download and then call those scripts in order to run them.

I'm not exactly sure what you mean by "download" the javascript. I've tried everything I can think of from including the js code in the main document, including it in the page that is loaded and even trying to trigger the function using onload in the requested page and that still didn't work.

Again I am using the prototype and scriptalacous frameworks utilizing the sortable function specifically. The main page loads a sortable list which works perfectly. I then have ajax controls that refine that list based on selections. The goal is to keep the list sortable regardless of whether it's loaded normaly or through the ajax controls.

Over the last few days I've been researching this issue fairly heavily and what I've found is that this is a common issue with ajax requests that contain javascript. Basically ajax requests only and always return text so if your content contains javascript it is simply returned as text and ignored by the browser.

From what I've read there seems to be two standard work arounds for this. One is using the eval function to execute the javascript and the second one is to create a custom parsing function to parse out the javascript and include it in the current DOM.

The second solution seems safer and is what I've been working on. I am having a bit of trouble though so I thought I'd come back and see if any gurus here could help.

Your example helped me get standard JS working in the content page, but the relational list code still doesn't work. I think it may be because the code I'm trying to use makes xmlhttp requests as well which looks to be another sticking point with ajax content.

Anyway, thanks for the help. I think I've followed this road as far as it goes and will probably start working on an alternative design pattern.