Multiple ajax content requests in a loop

Question

I'm trying to load some ajax content into a table, unfortunately it's only loading the last row multiple times instead of loading each new rows.

This is the code I'm using:

function periodicRefresh()
{
    $.ajax({
        type: 'GET',
        url: 'include/ajaxActions.php',
        data: "action=displayLastEvent",

        success: function(msg){
         var newid = msg;
         current = $("#list tr:first").get(0).id;
            if(newid != current){
             while (current<newid)
             {
              current++;
              addToList(current);
             } 
            }
       }
    });                
}

function addToList(x)
{
     $.ajax({
            type: 'GET',
            url: 'include/ajaxActions.php',
            data: "action=displayRow&row="+x,

            success: function(msg){
          $("#list").prepend(msg);
          $("#list tr:first").highlightFade({
                 speed:3000
                });
          lastrow = x-20;
          $('#'+lastrow).remove();
         }
     });

}

displayLastEvent returns the id of the last row.

displayRow returns the last row

Answer 1

You need to push your xmlHttps into an array or abstract data type, which you can then attach events handlers. Seems jquery doesn't do that for you.

Answer 2

I would address this issue by encouraging you to change your approach since it looks like you're likely making more AJAX requests than necessary whenever more rows need to be added to the list (2+ instead of just 2).

I would update include/ajaxActions.php?action=displayRow to accept a CSV of ids (or whatever it is you're passing in), and returning a set of row data, instead of data for just one row.

Answer 3

I think that:

current = $("#list tr:first").get(0).id;

return always the same result as jQuery remember only the page when it was first loaded.
For example, if you have a single tr[id=0]:

pass 1 : current = 0; msg = 1 -> 1 tr prepended with id = 1;
pass 2 : current is always 0 (not 1); msg = 1 -> 1 tr prepended with id = 1;
...

what you should do, is make jQuery recognize your page structure after adding your messages, or store the last index in a different way: using hidden input for example:

HTML:

<input type="hidden" value="0" id="lastId"/>

script:

initialize #lastId value when the page is loaded:

$(document).ready(function(){
    $("#lastId").val(0);//or by using your displayLastEvent action
});

modify periodicRefresh to read #lastId value:

function periodicRefresh()
{
    $.ajax({
        type: 'GET',
        url: 'include/ajaxActions.php',
        data: "action=displayLastEvent",

        success: function(msg){
                var newid = msg;
                var current = $("#lastId").val();
                if(current<newid) $("#lastId").val(newid);
            if(newid != current){
                while (current<newid)
                {
                        current++;
                        addToList(current);
                }       
            }
        }
    });                     
}