Hello all,
How can i call two functions with body onLoad event? Suppose i would like to call two ajax functions to load default data with abc() and xyz() functions in my onLoad event of body. I have done simple as calling two functions like this:
Code:
onLoad=“abc();xyz();”
Am i wrong? Can anyone tell me?
With Regards
I’m curious, why do you want to call AJAX functions via onload?
Using body’s inline onload attribute is bad practice. Using inline event handlers on other elements is not best practice, because it’s best to put all JavaScript, including events, in external .js files. It’s even worse to use them on <body> because they will overwrite any events for window defined in other JavaScript code blocks.
I recommend Dean Edwards’ event manipulation functions.
Thank you very much Kravvitz for concerning on my post. Actually i am not perfect in AJAX even though i have used a few functions (created by myself). I have used <body> onload event to call the function and load the default data in my div. So i want to populate two divs with default data when the page gets loaded.
So what may be the problem?
Regards
Rajug
But why do you need AJAX to load the data in the <div>?
We’ll need to see more of your code.
Please have a look on the way that i have followed to work with AJAX and say me the best way to implement AJAX.
<?php
$pid = $_GET['pid'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function GetXmlHttpObject(){
var objXMLHttp = null
if (window.XMLHttpRequest){
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject){
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
function LoadExe(url){
xmlHttp = GetXmlHttpObject()
if (xmlHttp == null){
alert ("Browser does not support HTTP Request")
return
}
xmlHttp.onreadystatechange = AfterExeLoaded
xmlHttp.open("GET", url, true)
xmlHttp.send(null)
}
function AfterExeLoaded(){
if(xmlHttp.readyState == 1){
document.getElementById("ContentOne").disabled = true;
document.getElementById("loading").style.visibility = "visible";
}
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
document.getElementById("loading").style.visibility = "hidden";
document.getElementById("ContentOne").disabled = false;
document.getElementById("ContentOne").innerHTML = xmlHttp.responseText
}
}
function GoExe(values){
var fdate = document.frmexe.fyear.value + "-" + document.frmexe.fmonth.value + "-" + document.frmexe.fday.value;
var tdate = document.frmexe.tyear.value + "-" + document.frmexe.tmonth.value + "-" + document.frmexe.tday.value;
LoadExe(values + "&fdate=" + fdate + "&tdate=" + tdate + "&action=" + Math.random());
}
window.onload = function(){GoExe('actionfile.php?pid=<?php echo $pid;?>');}
</script>
</head>
<body>
<div id="loading" style="visibility:hidden;position:absolute;left:490px;top:200px;">
<img src="../images/ajxloading.gif" /><br />
Please wait.<br> Loading...
</div>
<form name="frmcprofile" method="post" action="">
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="TableStyle">
<tr>
<td height="20" colspan="9"><strong>Select date range for Computer Profile </strong></td>
</tr>
<tr>
<td width="6%"><strong>From</strong></td>
<td width="11%">
<select name="fyear" class="buttonstyle" id="fyear">
<option value="000" selected>Year</option>
<?php for($i = 0; $i < count($ArrYear); $i++){ ?>
<option value="<?php echo $ArrYear[$i];?>" <?php if(date('Y') == $ArrYear[$i]){echo "selected";} ?>><?php echo $ArrYear[$i];?></option>
<?php } ?>
</select></td>
<td width="13%">
<select name="fmonth" class="buttonstyle" id="fmonth">
<option value="000" selected>Month</option>
<?php for($i = 0; $i < count($ArrMonth); $i++){ ?>
<option value="<?php echo $i+1;?>" <?php if(date('m') == $i+1){echo "selected";} ?>><?php echo $ArrMonth[$i];?></option>
<?php } ?>
</select></td>
<td width="21%"><select name="fday" class="buttonstyle" id="fday">
<option value="000" selected="selected">Day</option>
<?php for($i = 1; $i <= 31; $i++){ ?>
<option value="<?php echo $i;?>" <?php if(date('d') == $i){echo "selected";} ?>><?php echo $i;?></option>
<?php } ?>
</select></td>
<td width="6%"><strong>To</strong></td>
<td width="11%">
<select name="tyear" class="buttonstyle" id="tyear">
<option value="000" selected>Year</option>
<?php for($i = 0; $i < count($ArrYear); $i++){ ?>
<option value="<?php echo $ArrYear[$i];?>" <?php if(date('Y') == $ArrYear[$i]){echo "selected";} ?>><?php echo $ArrYear[$i];?></option>
<?php } ?>
</select></td>
<td width="13%">
<select name="tmonth" class="buttonstyle" id="tmonth">
<option value="000" selected>Month</option>
<?php for($i = 0; $i < count($ArrMonth); $i++){ ?>
<option value="<?php echo $i+1;?>" <?php if(date('m') == $i+1){echo "selected";} ?>><?php echo $ArrMonth[$i];?></option>
<?php } ?>
</select></td>
<td width="13%">
<select name="tday" class="buttonstyle" id="tday">
<option value="000" selected="selected">Day</option>
<?php for($i = 1; $i <= 31; $i++){ ?>
<option value="<?php echo $i;?>" <?php if(date('d') == $i){echo "selected";} ?>><?php echo $i;?></option>
<?php } ?>
</select></td>
<td width="6%"><input name="tblGo" type="button" class="buttonstyle" value="GO" onClick="javascript:GoExe('actionfile.php?pid=<?php echo $pid;?>');"></td>
</tr>
</table>
</form>
<div id="ContentOne"></div>
<div id="ContentTwo"></div>
</body>
</html>
This is the almost all code and there is another file actionfile.php which will be loaded in the div idied ContentOne. Likewise i want to load another file in another div ContentTwo in the page load.
I think you can see there is a form to select the date ranges and click on the Go button, it will call that file again with records that are in that date range whereas the on the onload call it will show all the records.
Please tell me how can i accomplish the goal?
With Regards
<div id="ContentOne">
<?php include("actionfile.php"); ?>
</div>
<div id="ContentTwo">
<?php include("anotherfile.php"); ?>
</div>
Dear zcorpan,
I think including the pages is not the ajax. Is this? Then how can i pass pid and selected date ranges to that file without refreshing the whole page?
I think you can see there is a form to select the date ranges and click on the Go button, it will call that file again with records that are in that date range whereas the on the onload call it will show all the records.
Regards
Do you want to fire both functions in the same time ? The way you wrote it
<body onLoad="abc();xyz();" ...
the functions will be called one after antoher. Try triggering them with timeouts, like this:
<body onLoad="var k1=window.setTimeout('abc();', 200); var k2=window.setTimeout('xyz();', 200);" ...
in this way they will be fired almost simultaneously.
It would be worth spending some time researching events. Using inline scripting works, but it makes your code messy and difficult to maintain. If you put code in an external JS file, you can use:
function PageLoad() {
function1(); function2(); functionN();
}
window.onload = PageLoad; // no parenthesis after function name
Alternatively, you could use window.addEventListener (or window.attachEvent in IE6 and below). This allows you to add more than one event handler, but you cannot guarantee which order event handlers will be fired.
It may be worth looking at the event handlers in some of the many script libraries (Yahoo, scriptalious, etc). But, it’s always worth writing your own to get a good understanding of browser events.