Executing JS / Calling Functions

[Maximus]

I am currently doing a lot of work with AJAX based web applications, and I find it to be a real drag that you cannot use the "onLoad" event to call functions when loading sections of a page with AJAX.My problem is that I have to execute a piece of code as soon as the page is loaded (dynamically, using ajax). On normal sites, this would work with the onLoad property, so once the page has loaded, that event would trigger a JS function of my choice. But with AJAX, only a part of the site "refreshes/loads" so this event handler is useless.I have tried simply putting the function I want to execute upon loading in script tags like so:

<script type="text/javascript">loadContent('pagename', 'divname');</script>

but with no success :-(Does anyone know how to solve this problem? This is really important to me, and I would really appreciate any help, thanks.

[jesh]

Can you tie in the code that you want to execute into your onreadystatechange handler in the XMLHttpRequest? That readystatechange event happens at each step in the creation, opening, sending, and receiving stage of the request. If you only execute code when the readyState property of the XMLHttpRequest is 4 ("complete"), it would essentially act like an onload event.It might also help to see some of your code.EDIT: If you want to execute code that is in the files that you are getting using AJAX, then you might try something like this:

// get a reference to the element that is the container for the datavar div = document.getElementById("TheContainerDiv");// assign the content received from AJAX to the innerHTML of the div:div.innerHTML = ajax.responseText;// next, look in the div to see if there are any script elements:var scripts = div.getElementsByTagName("script");// loop through all the scripts:for(var i = 0; i < scripts.length; i++){	if(scripts[i].type = "text/javascript")	{		// eval what's in the script element		eval(scripts[i].innerHTML);	}}

Some key points need to be made here, however.1) All the script elements in the files that you are getting with AJAX need to end with <\/script> rather than </script>.2) You'll want to be real sure that the code that is in those script elements is safe to be eval'd.I hope this helps.

[Maximus]

Thanks a lot for such a responsive post!My explanation wasn't too good, but I think you understood me.I don't understand why having this (below) in the content that is being loaded, isnt working.

<script type="text/javascript">go('resources.ic', 'resources');<\/script>

I could try your first suggestion oh just modifiying the function that loads the content to call another funtion, but then that would only be a temporary solution and really woulnt help me that much. I need the content that is loaded via AJAX to call a function and there seems to be no way of doing this.

[jesh]

Yeah, I've run into this problem before. The following does not work:

var div = document.getElementById("Container");div.innerHTML = "<script>alert('hello!');<\/script>";

It's possible that it is because of browser security, I'm not certain. It does work, however, if you use the method I described in my previous post (i.e. the eval(script.innerHTML)).

[Maximus]

Yeah, I've run into this problem before. The following does not work:

var div = document.getElementById("Container");div.innerHTML = "<script>alert('hello!');<\/script>";

It's possible that it is because of browser security, I'm not certain. It does work, however, if you use the method I described in my previous post (i.e. the eval(script.innerHTML)).

Hmm, I tried your code and my browser froze. I'm assuming its because of the loop :SHowever, I found another way to accomplish my goal. By inserting an image into the ajax loaded content I was able to add the onLoad trigger to it. Example:

<img src="test.gif" onLoad="do(this);" style="display: none;">

Its not a perfect solution as it is sort of primitive, but it seems to work really well and is fairly easy to use. The additional style code hides it. Small 1x1 images are perfect for this :)EDIT: In FireFox all is fine, but in IE(6) the function thats with the image is being called endless times...for whatever reason :-( I have yet to figure out how to fix this.

[jesh]

Is this page up on the web? If so, if you can provide a link to it someone here might be able to help you further.