jquery - How to handle dynamically created tr in table -
i working ajax user can request multiple ajax @ single time. each user request creating tr in table show current process of user request.
user can request multiple file @ time. in table 2 files uploading multiple time linux command.
and ajax code :-
$('#mxf').on('submit', function(event){ event.preventdefault(); d = new date(); $.ajax({ url : $(this).attr('action'), type : $(this).attr('method'), datatype: 'json', data : $(this).serialize(), beforesend: function() { var row = '<tr>'; row += '<td>'+$('#fileid').val()+'</td>'; row += '<td>'+$('#ndrive').val()+'</td>'; row += '<td>date</td>'; row += '<td>time</td>'; row += '<td><div id="process-bar" class="process-bar"> </div></td>'; row += '</tr>'; $('#stastistics tbody').prepend(row); $('#fileid').val(''); $('#ndrive').val(''); }, success : function(data) { if(data.status == 'error') { var html = '<span class="label label-danger">error</span>'; $("tr td:nth-child(5)").find('#process-bar').remove(); $("tr td:nth-child(5)").html(html); } else if(data.status == 'success') { var html = '<span class="label label-success">success</span>'; $("tr td:nth-child(5)").find('#process-bar').remove(); $("tr td:nth-child(5)").html(html); } }, error : function( xhr, err ) { }, }); }); - in beforesend function creating new row every request
- in success method updating 5th td "processing" "success" or "error".
now have problem every success or failure method $("tr td:nth-child(5)").html(html); line updating 5th td of rows.
so how can handle current processes rows 5th td. update single row's 5th td
thanks
you need generate unique id or marker class , add html. can generate id variable available ajax success method via closure. can generate unique id using library underscore.js or roll own, shown in stack overflow post: jquery generate unique ids. example use underscore. note set id on table cell, if not need easy access rest of row. execute selector once , save result in $cell reuse. bit more efficient.
$('#mxf').on('submit', function(event){ var d = new date(), // had global tempid = _.uniqueid("row_"); event.preventdefault(); $.ajax({ url : $(this).attr('action'), type : $(this).attr('method'), datatype: 'json', data : $(this).serialize(), beforesend: function() { var row = '<tr ' + 'id="' + tempid + '">'; row += '<td>'+$('#fileid').val()+'</td>'; row += '<td>'+$('#ndrive').val()+'</td>'; row += '<td>date</td>'; row += '<td>time</td>'; row += '<td><div id="process-bar" class="process-bar"> </div></td>'; row += '</tr>'; $('#stastistics tbody').prepend(row); $('#fileid').val(''); $('#ndrive').val(''); }, success : function(data) { var $cell = $("tr#" + tempid + " td:nth-child(5)"); if(data.status == 'error') { var html = '<span class="label label-danger">error</span>'; $cell.find('#process-bar').remove(); $cell.html(html); } else if(data.status == 'success') { var html = '<span class="label label-success">success</span>'; $cell.find('#process-bar').remove(); $cell.html(html); } }, error : function( xhr, err ) { }, }); }); that should trick.
Comments
Post a Comment