Javascript Ajax load on mulpiple div with different arguments

Question

I want to run the following ajax code to mulpiple divs with different values.

If I copy-paste the following code into my page, it loads only the last (or the first)

I want to run these 3 javascript calls and see 3 different result though Ajax.

<script type="text/javascript">ajaxGEOFunction(64,0);</script>
<div id='ajaxDiv'>foo</div>
<hr><hr>
<script type="text/javascript">ajaxGEOFunction(65,0);</script>
<div id='ajaxDiv'>foo</div>
<hr><hr>
<script type="text/javascript">ajaxGEOFunction(66,0);</script>
<div id='ajaxDiv'>foo</div>
<hr><hr>
<script type="text/javascript">ajaxGEOFunction(65,0);</script>
<div id='ajaxDiv'>foo</div>

How this can be done?

Abobe code:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxGEOFunction(argId,option){
 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){the 3 divs 
         // 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 ;
 queryString +=  "&o=" + option;
 ajaxRequest.open("GET", "ajaxGEOInjection.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
//-->
</script>

Answer 1

Give the three <div> elements unique id values.

<div id='ajaxDiv1'>foo</div>
<hr><hr>
<div id='ajaxDiv2'>foo</div>
<hr><hr>
<div id='ajaxDiv3'>foo</div>
<script type="text/javascript">
ajaxGEOFunction('ajaxDiv1',64,0);
ajaxGEOFunction('ajaxDiv2',65,0);
ajaxGEOFunction('ajaxDiv3',66,0);
</script>

Add a parameter to the function so you can pass the element id .

function ajaxGEOFunction(elementId,argId,option){
 ...     
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById(elementId);
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 ...
}

---

If you don't want to give each div a unique id , and you want to be able to add divs without having to add to the JavaScript, you could give each div a class and use data-* attributes like this:

<div class="ajaxDiv" data-argId="64" data-option="0">foo</div>
<hr><hr>
<div class="ajaxDiv" data-argId="65" data-option="0">foo</div>
<hr><hr>
<div class="ajaxDiv" data-argId="66" data-option="0">foo</div>
<hr><hr>
<div class="ajaxDiv" data-argId="65" data-option="0">foo</div>

<script>
(function() {
    function ajaxGEOFunction(ajaxDisplay,argId,option){
        ...
         ajaxRequest.onreadystatechange = function(){
             if(ajaxRequest.readyState == 4){
                 ajaxDisplay.innerHTML = ajaxRequest.responseText;
             }
        }
        ...
    }

    var ajaxDisplays = document.getElementsByClassName('ajaxDiv');
    for (var i=0; i<ajaxDisplays.length; i++) {
        ajaxGEOFunction(ajaxDisplays[i],
                        ajaxDisplays[i].getAttribute('data-argId'),
                        ajaxDisplays[i].getAttribute('data-option'));
    }
})();
</script>

Answer 2

You are using the same id for each <div> , how is Javascript supposed to know which <div> to load what? You need to use classes instead.

<div class='ajaxDiv'>foo</div>

Then, in your JS use...

ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementByClassName('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
}

By using getElementByClassName() a NodeList will be created which AJAX can then process. Another issue you could be running into, is that AJAX is asynchronous. You may also try experimenting with using synchronous requests instead.

var queryString = "?q=" + argId ;
queryString +=  "&o=" + option;
ajaxRequest.open("GET", "ajaxGEOInjection.php" + 
                              queryString, false); //process as synchronous//
ajaxRequest.send(null);