assign val to div using Ajax , calling ajax in loop

[uday M]

 

hi,

I am calling Ajax in javascript loop and assign response value to div .if I alert message (lastrssbridgeurl) it is work fine but after removing alert it fill only last div.

 

my Javascript code :-

 

  for (var i in interest_array )

  {

      makeGetRequest(interest_array);

        loopDelay(1000);// for delay in loop

  }

 

Ajax code:

 

  1. function createRequestObject() {

  2.        var tmpXmlHttpObject;

  3. 

  4.        //depending on what the browser supports, use the right way to create the XMLHttpRequest object

  5.        if (window.XMLHttpRequest) {

  6.        // Mozilla, Safari would use this method ...

  7.        tmpXmlHttpObject = new XMLHttpRequest();

  8. 

  9.        } else if (window.ActiveXObject) {

  10.        // IE would use this method ...

  11.        tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");

  12.        }

  13. 

  14.        return tmpXmlHttpObject;

  15.  }

  16. 

  17.  //call the above function to create the XMLHttpRequest object

  18.  var http = createRequestObject();

  19. 

  20. 

  21.  function makeGetRequest(interest_Id) {

  22. 

  23.        //make a connection to the server ... specifying that you intend to make a GET request

  24.        //to the server. Specifiy the page name and the URL parameters to send

  25. 

  26.        var lastrssbridgeurl="http://localhost/TheInterest.com/index.php/news/get_news/"+interest_Id;

  27. //        alert(lastrssbridgeurl);

  28. 

  29.        http.open('get', lastrssbridgeurl,true);

  30.        //assign a handler for the response

  31.        http.onreadystatechange =function(){ processResponse(interest_Id)}

  32. 

  33.        //actually send the request to the server

  34.        http.send(null);

  35.  }

  36. 

  37.  function processResponse(interest_Id) {

  38.        //check if the response has been received from the server

  39.        var div_name="detail_"+ interest_Id;

  40. 

  41.        if(http.readyState == 4){

  42. 

  43.        //read and assign the response from the server

  44.        var response = http.responseText;

  45.        //do additional parsing of the response, if needed

  46. 

  47.        //in this case simply assign the response to the contents of the <div> on the page.

  48.          document.getElementById(div_name).innerHTML =response;

  49.        }

  50.    }

[F1Fan]

First, please post your code inside the

tags.

 

Your problem is that the loop is pushing the next request before the previous has finished. You can only have one http request at a time, which means that the new request is overwriting the previous request and so on, until the last request. So, you'll need to create a function that runs one of the array elements at a time, and when the request has finished, it requests the next. Something like this perhaps:

 

This would be the JS code that starts the whole thing, in place of your JS loop;

loopThrough(0,interest_array);

 

Now the AJAX:

function createRequestObject() {
  var tmpXmlHttpObject;
  XMLHttpRequest object
  if (window.XMLHttpRequest) {
    tmpXmlHttpObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return tmpXmlHttpObject;
}
var http = createRequestObject();
function loopThrough(i,interest_array){
  if (interest_array[i]){
    var interest_id = interest_array[i]; // I don't know what your interest_id should be... just guessing
    var lastrssbridgeurl = "http://localhost/TheInterest.com/index.php/news/get_news/"+interest_Id;
    http.open('get', lastrssbridgeurl,true);
    http.send(null);
    http.onreadystatechange =function(){
      if(http.readyState == 4){
        var div_name="detail_"+ interest_id;
        document.getElementById(div_name).innerHTML = http.responseText;
        i++;
        if (interest_array[i]){
          loopThrough(i,interest_array);
        }
      }
    }
  }
}

 

Note that the loopThrough function is called again only after the readyState is 4.

[uday M]

First, please post your code inside the

tags.

 

Your problem is that the loop is pushing the next request before the previous has finished. You can only have one http request at a time, which means that the new request is overwriting the previous request and so on, until the last request. So, you'll need to create a function that runs one of the array elements at a time, and when the request has finished, it requests the next. Something like this perhaps:

 

This would be the JS code that starts the whole thing, in place of your JS loop;

loopThrough(0,interest_array);

 

Now the AJAX:

function createRequestObject() {
  var tmpXmlHttpObject;
  XMLHttpRequest object
  if (window.XMLHttpRequest) {
    tmpXmlHttpObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return tmpXmlHttpObject;
}
var http = createRequestObject();
function loopThrough(i,interest_array){
  if (interest_array[i]){
    var interest_id = interest_array[i]; // I don't know what your interest_id should be... just guessing
    var lastrssbridgeurl = "http://localhost/TheInterest.com/index.php/news/get_news/"+interest_Id;
    http.open('get', lastrssbridgeurl,true);
    http.send(null);
    http.onreadystatechange =function(){
      if(http.readyState == 4){
        var div_name="detail_"+ interest_id;
        document.getElementById(div_name).innerHTML = http.responseText;
        i++;
        if (interest_array[i]){
          loopThrough(i,interest_array);
        }
      }
    }
  }
}

 

Note that the loopThrough function is called again only after the readyState is 4.

thx , this code works in Firefox  but not in IE