CODEWITHSUNDEEP
javascripthtmlajax
user4472256
user4472256

Reputation:

javascript/ Ajax execute onload a div

I want to run the AJAX request on the following code "Onload", not "onclick"

I dont want to add the onload property in the body tag. I want it in a different tag, in a div for example.

I change the row: 

<input type='button' onclick='ajaxFunction(65)' value='Query MySQL'/>

and I did it 

<div onload='ajaxFunction(65)'></div>

but it doesnt work.

    <html>
<head>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(argId){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.

 var queryString = "?q=" + argId ;
 ajaxRequest.open("GET", "getInputs.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
//-->
</script>
</head>
<body>

<input type='button' onclick='ajaxFunction(65)' value='Query MySQL'/>

<div id='ajaxDiv'>Your result will display here</div>


</body>
</html>

Upvotes: 3

Views: 7182

Answers (3)

void
void

Reputation: 36703

No, you can't put onload on a div. The easiest way to make it work would be to put the function call directly after the element.

Example:

...
<div></div>
<script type="text/javascript">
   ajaxFunction(65);
</script>
...

or - even better - just in front of </body>:

...
<script type="text/javascript">
   ajaxFunction(65);
</script>
</body>

...so it doesn't block the following content from loading.

The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.

Upvotes: 3

EvilZebra
EvilZebra

Reputation: 1072

Simply place your function call after the div, like so:

<script type="text/javascript">ajaxFunction(65)</script>

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

wrap it in load event

 window.addEventListener('load', function(event) {

function ajaxFunction(argId){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.

 var queryString = "?q=" + argId ;
 ajaxRequest.open("GET", "getInputs.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
});

Upvotes: 0

Related Questions