Does Javascript work on AJAX generated code?

[spyd3rr]

Hey guys,

There's some great stuff on this site, but unfortunately I can't get them to work on AJAX generated code.

I did some googling but couldn't find much on the topic, so I'm wondering if any of can answer that question confidently: Can Javascript effects work on AJAX generated code?

For example, can you use this:
http://www.dynamicdrive.com/dynamici...tchcontent.htm

within the content of (ie. the bird tag) of this:
http://www.dynamicdrive.com/dynamici...tent/index.htm

If so, how? If not, why not?

Thanks in advance for the help!

[mburt]

AJAX is just an implementation of JavaScript, so just use the DOM to access the elements you need. It's not an iframe or anything, so it's just a part of the page.
Use document.getElementById(); to access the element created/accessed with AJAX.

[spyd3rr]

Thanks for the quick response!

I've gotten basic javascript to work by the method you suggested (using getElementbyId or getElementsbyName).

However, once you get into something more complicated like the switch content script, where you have to include an external .js file and use it by adding tags to the AJAX-generated html, it flakes out.

Any thoughts on that?

[mburt]

Probably just two conflicting scripts. For example, if both of them use the window.onload event handler, you have to combine the two into one event handler:

window.onload = funct1;funct2;

//edit: 2000th post. Yay

[spyd3rr]

I see...I'll see what i can work with. Thanks for the advice!

and congrats on your 2000th. i have (had) exactly 1/1000th of your posts haha

[spyd3rr]

Actually, if the webpage uses something, and an included .js file does as well, how would you handle that?

[spyd3rr]

so, I'm pretty sure thats not the problem because the other script uses window.addEventListener.

Any other ideas? The script works fine when I put it in the main content, but as soon as I move it to the Ajax generated code, it doesn't work anymore.

I would include code, but its rather long to look thru.

[jscheuer1]

Using addEventListener only helps resolve conflicts with other function(s) already assigned to that event. If the function fires before its content has been made a part of the page, or if it doesn't fire at all because it is added after the event trigger that it is associated with has passed, you have problems. Both of these situations can happen with Ajax added content. See:

http://www.dynamicdrive.com/forums/s...ad.php?t=17426

That is a general discussion of how to deal with this in most situations. Some situations require more code and an outline of how that can done can be found here:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

[spyd3rr]

Awesome! got everything to work except for one thing:

Take a look at this sort table script:
http://www.kryogenix.org/code/browser/sorttable/

Its never explicitly called, it looks as if it searches for a class definition within the tables on the page. How would one go about doing that after the AJAX content loads?

[jscheuer1]

I'm not sure what your problem with that script is. If it is that you don't know how to initialize it, that's easy. The initialization call (normally fired onload of a page) is:

sorttable.init();

So, using either of the two basic methods I linked to in my previous post, all you should need to do is call that after the content for it has been loaded via Ajax.

If you need more help, please explain the problem in more detail and supply a link to your problem page(s).