SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calling two function with body onLoad

    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

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But why do you need AJAX to load the data in the <div>?

    We'll need to see more of your code.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please have a look on the way that i have followed to work with AJAX and say me the best way to implement AJAX.
    Code:
    <?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;">
    	&nbsp;&nbsp;&nbsp;<img src="../images/ajxloading.gif" /><br />
    	&nbsp;&nbsp;&nbsp;Please wait.<br>&nbsp;&nbsp;&nbsp;Loading...
    </div>
    <form name="frmcprofile" method="post" action="">
    <table width="100&#37;" 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

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <div id="ContentOne">
     <?php include("actionfile.php"); ?>
    </div>
    <div id="ContentTwo">
     <?php include("anotherfile.php"); ?>
    </div>
    Simon Pieters

  7. #7
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want to fire both functions in the same time ? The way you wrote it

    HTML Code:
    <body onLoad="abc();xyz();" ...
    the functions will be called one after antoher. Try triggering them with timeouts, like this:

    HTML Code:
    <body onLoad="var k1=window.setTimeout('abc();', 200); var k2=window.setTimeout('xyz();', 200);" ...
    in this way they will be fired almost simultaneously.

  9. #9
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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.
    Last edited by ceeb; Jan 29, 2007 at 07:38. Reason: Used a [code] block.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •