title: Calling to ajax multiple times from javascript
body: <pre><code>for(var x=0 ; x&lt;=23 ; x++)
  {
      AjaxRequest16 = null;
      AjaxRequest16 = getXmlHttpRequestObject(); // method here to load the request
  
      if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0) 
      {
          AjaxRequest16.open("GET", "ajax.php?id=16&amp;AreaID=" +encodeURIComponent(AreaID)+ "&amp;month=" 
                  +encodeURIComponent(document.getElementById("cboMonths").value)+ "&amp;TimeSlot=" +encodeURIComponent(x), true);
  
          AjaxRequest16.send(null);
  
          AjaxRequest16.onreadystatechange = function()
          {
              if(AjaxRequest16.readyState == 4) 
              {
                  var innerHTML = AjaxRequest16.responseText.toString();
                  /* Retrieve data from the server and display. */ 
                  document.getElementById("divTime"+x).innerHTML = innerHTML;
  
              }/* end if */            
          }/* end function */            
      }/* end if */            
  
  }/* end if */  
  </code></pre>
  
  <p>I'm trying to call ajax multiple times to load data in a set of divs: 24 of them, they start with divTime0, divTime1, divTime2, divTime3...... divTime23. Each time its called, the value for the TimeSlot corresponds with the div e.g. TimeSlot=0 goes in divTime0. </p>
  
  <p>I know the ajax calls here are overriding each other but have no idea how to solve it without writing out 24 blocks of code to get it working. N.B. this <strong>is</strong> working if i execute singularly without the for loop but it will just populate 1 of the 24 divs</p>
  
  <p>The following code worked to load 24 divs with images:</p>
  
  <pre><code>for(var x=0 ; x&lt;=23 ; x++)
      document.getElementById("timeanalysisimg"+x).src="ajax.php?id=15&amp;AreaID=" +encodeURIComponent(AreaID); 
  </code></pre>
  
  <p>I'm trying to do something similar without having to write unnecessary code. Any ideas?</p>
  
  <p><strong>I got it working</strong>. Just pasting the solution</p>
  
  <pre><code>for(var x=0 ; x&lt;=9 ; x++)
  {
      test(x, AreaID); // calling the function which resides externally to the loop
  }
  </code></pre>
  
  <p>An external method:</p>
  
  <pre><code>function test(x, AreaID)
  {
          var AjaxRequest16 = null;
          AjaxRequest16 = getXmlHttpRequestObject();
  
          if(AjaxRequest16.readyState == 4 || AjaxRequest16.readyState == 0) 
          {
              AjaxRequest16.open("GET", "ajax.php?id=16&amp;AreaID=" +encodeURIComponent(AreaID)+ "&amp;month=" 
                      +encodeURIComponent(document.getElementById("cboMonths").value)+ "&amp;TimeSlot=" +encodeURIComponent(x), true);
  
              AjaxRequest16.send(null);
  
              AjaxRequest16.onreadystatechange = function()
              {
                  if(AjaxRequest16.readyState == 4) 
                  {
                      var innerHTML = AjaxRequest16.responseText.toString();
                      /* Retrieve data from the server and display. */ 
                      document.getElementById("divTime"+x).innerHTML = innerHTML;
  
                  }      
              }
          }    
  }
  </code></pre>