Jump to content

onLoad - Need help


Maximus

Recommended Posts

Hey, I am using AJAX to request a page, so I cannot use "body onload", because the page is loaded into an existing HTML page.Instead, I tried using the following in my ajax-loaded page:

<script type="text/javascript" onLoad="java script:changeText()"></script>

I tried that because in the w3schools js tutorial it said that the onLoad event works with <script>. http://w3schools.com/jsref/jsref_onload.aspAnyways, my code didn't do anything...the function itself works though, I tested it with a link and "onmouseover".I just need the function "changeText" to be executed as soon as the page is loaded. Keep in mind im using ajax, so the page isent actually refreshed.Help is greatly appreciated!

Link to comment
Share on other sites

Are you trying to run changeText in order to send the AJAX request? Or are you wanting changeText to run when the AJAX request is finished?If you want it to run the AJAX, you can do something like this:

window.onload = changeText;

or

<body onload="changeText();">

If you want it to run when the AJAX request has finished, use the onreadystatechange event:

xmlhttp.onreadystatechange = changeText;xmlhttp.open(....)xmlhttp.send(....)

Link to comment
Share on other sites

Are you trying to run changeText in order to send the AJAX request? Or are you wanting changeText to run when the AJAX request is finished?If you want it to run the AJAX, you can do something like this:
window.onload = changeText;

or

<body onload="changeText();">

If you want it to run when the AJAX request has finished, use the onreadystatechange event:

xmlhttp.onreadystatechange = changeText;xmlhttp.open(....)xmlhttp.send(....)

After its finished loading...I know I can use onreadystate, but thats too complicated, because this whole thing is inside a HUGE JS function. Isen't there another way, using simple html dom?I mean, it loads html objects via ajax instead of refreshing the page, but I don't see why "onLoad" doesnt work for those objects as it does when you refresh the whole page.
Link to comment
Share on other sites

After its finished loading...I know I can use onreadystate, but thats too complicated, because this whole thing is inside a HUGE JS function. Isen't there another way, using simple html dom?I mean, it loads html objects via ajax instead of refreshing the page, but I don't see why "onLoad" doesnt work for those objects as it does when you refresh the whole page.
Using an event handler to handle the onreadystatechange event isn't all that complicated. Here's an example:
// first, make sure that the ajax object is global:var xmlhttp;// load your ajax object however you normally would.// then do all your ajax stuff here...xmlhttp.onreadystatechange = changeText;xmlhttp.open(....);xmlhttp.send('');// this is the event handler...function changeText(){	if(xmlhttp.readyState == 4) // 4 = complete	{		if(xmlhttp.status == 200) // Http Status Code 200 (OK)		{			// you can either directly modify the innerHTML of the 			// elements right here			document.getElementById("mydiv").innerHTML = xmlhttp.responseText;			// or you can call a new function:			// myNewFunction(xmlhttp.responseText);		}	}}

When the readystate has changed, your changeText function will fire. This will happen up to 4 times (once for each readystate). When the readystate is 4 (complete), you can opt to check to make sure that the response returned a 200 (OK) rather than something like a 404 (File Not Found) or a 500 (Internal Server Error). If readystate = 4 and status = 200, your code will execute.The onLoad event only fires when the page loads - the only way you can use onLoad to run your code would be to refresh the entire page which would defeat the purpose of using AJAX.I hope this helps.

Link to comment
Share on other sites

Using an event handler to handle the onreadystatechange event isn't all that complicated. Here's an example:
// first, make sure that the ajax object is global:var xmlhttp;// load your ajax object however you normally would.// then do all your ajax stuff here...xmlhttp.onreadystatechange = changeText;xmlhttp.open(....);xmlhttp.send('');// this is the event handler...function changeText(){	if(xmlhttp.readyState == 4) // 4 = complete	{		if(xmlhttp.status == 200) // Http Status Code 200 (OK)		{			// you can either directly modify the innerHTML of the 			// elements right here			document.getElementById("mydiv").innerHTML = xmlhttp.responseText;			// or you can call a new function:			// myNewFunction(xmlhttp.responseText);		}	}}

When the readystate has changed, your changeText function will fire. This will happen up to 4 times (once for each readystate). When the readystate is 4 (complete), you can opt to check to make sure that the response returned a 200 (OK) rather than something like a 404 (File Not Found) or a 500 (Internal Server Error). If readystate = 4 and status = 200, your code will execute.The onLoad event only fires when the page loads - the only way you can use onLoad to run your code would be to refresh the entire page which would defeat the purpose of using AJAX.I hope this helps.

Hmm, thanks.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...