JQuery appending subrows to the end of the table

Question

What I am trying to achieve:

Use ajax to get a set of result. (id, name e.t.c)
use id on 1 to make another ajax call, this is in function however.
in the success function of 1, call 2.

Such that result in 2 is a subrow of 1.

Problem is that jQuery is appending 2 after result one. I expect it to do

result-set-1, result-set-1-subrow;
result-set-2, result-set-2-subrow;
etc

however it is displaying

result-set-1,
result-set-2,
result-set-1-subrow,
result-set-2-subrow

Here is my code

$.ajax({
url: ws_url + 'sessions',
success: function(result) {
  $.each(result, function(index, value) {
    $('#sessions').append('<tr class="details-control"><td>' + value.sessionName + '</td><td>' + value.sessionDate + '</td><td>' + value.startTime + ' - ' + value.endTime + '</td><td>' + value.Room + '</td></tr><tr><th colspan=5>Talks</th></tr><tr><th>Talk Name</th><th>Start Time</th><th>End Time</th><th>Speaker(s)</th></tr>');
    getTalks(value.sessionID);
  });
}
});

});

function getTalks(sessID) {
  $.ajax({
    url: ws_url + 'talks&sessID=' + sessID,
    success: function(result) {
      if (result !== "null" && result !== "undefined") {
        $.each(result, function(ind, val) {
          $('#sessions').append('<tr><td>' + val.talkName + '</td><td>' + val.startTime + '</td><td>' + val.endTime + '</td><td>' + val.speakers + '</td></tr>');
        });
      } else {
        $('#sessions').append('<tr><td colspan=5> No Talks </td><td>');
      }
    }
  });
}

<table id="sessions" class="table table-striped table-bordered">
  <tr>
    <th>Name</th>
    <th>Date</th>
    <th>Time</th>
    <th>Room</th>
  </tr>
</table>

That is because of the A for ASYNCRONOUS in AJAX. You will have to refactor the code to perhaps use a sessions object and add the subsessions as array to each — mplungjan, Feb 11 '16 at 06:38
Have a look at http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done — mplungjan, Feb 11 '16 at 06:46

Jack jdeoel · Accepted Answer · 2016-02-12T00:45:04.360

From your code, i did the following code and got desired output. Thank you so much. I didn't use your html, but i used the function as you wrote it.

$.ajax({        
    url: ws_url+'sessions',
    success: function(result) {           
        $.each(result, function(index, value) {
            var result_subrow = getTalks(value.sessionID); 
            var talks = $.parseJSON(result_subrow);

            //Add Session
            $('#sessions').append('<tr class="details-control"><td>' + value.sessionName + '</td><td>' + value.sessionDate + '</td><td>' + value.startTime + ' - ' + value.endTime + '</td><td>' + value.Room + '</td></tr>');

            //Add Talks
            $.each(talks, function(i,v){
                $('#sessions').append('<tr><td>'+v.talkName+"</td><td>"+v.startTime + '</td><td>' + v.endTime + '</td><td>' + v.speakers + '</td></tr>');               
            });

        });
    }
});

function getTalks(sessID) {
  var data = $.ajax({
       url: ws_url + 'talks&sessID=' + sessID,
       async : false, 
       success: function(result) {  }
       });
  return data.responseText;
 }

This does NOT return anything unless you turn off async!!! `var result_subrow = getTalks(value.sessionID);` http://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work — mplungjan, Feb 11 '16 at 16:58

score -1 · Answer 2 · answered Feb 11 '16 at 06:57

You can add anything to your table like this:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

JQuery appending subrows to the end of the table

2 Answers2