我正在使用ajax,用户可以在同一时间请求多个ajax。我为每个用户请求在表中创建一个tr,该表显示了用户请求的当前过程。
用户可以一次请求多个文件。在此表中,两个文件正在使用linux命令上载多次。
而我的ajax代码是:-
$('#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 ) {
},
});
});
现在我有一个问题,每个成功或失败方法$(“ tr td:nth-child(5)”)。html(html); 此行将更新所有行的所有第5个td。
因此,我如何才能仅处理当前处理的第5行td。因此它将仅更新单行的第5天
谢谢
您需要生成唯一的ID或标记类,然后将其添加到html中。您可以将id生成为一个变量,该变量将通过闭包对Ajax成功方法可用。您可以使用underscore.js之类的库生成唯一的ID,也可以滚动自己的库,如本Stack Overflow文章中所示:jQuery生成唯一的ID。我的示例将使用下划线。请注意,如果您不需要轻松访问该行的其余部分,则还可以仅在表格单元格上设置ID。我还执行一次选择器,并将结果保存在$ cell中以供重用。这样会更有效率。
$('#mxf').on('submit', function(event){
var d = new Date(), // you had this as a 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 ) {
},
});
});
这应该够了吧。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句