1
我試圖跟蹤每次迭代的更新，當每次完成時我都想以優雅的方式向用戶顯示摘要。我已嘗試幾乎所有的方法調用來更新頁面上的元素，但除非在事件調用中的任何時刻發出警報，否則它不會更新。.each（）迭代後，Jquery DOM沒有更新
如果有人知道我可能會錯過什麼，我想看看它是如何完成的。大感謝提前！
$('#button-restore-projects').live("click", function() {
var countSuccess = 0
, countError = 0
, element = $("#selectedProjects option")
, eachCount = element.length;
$("#countReady").html(eachCount);
$.each(element, function(i, o) {
var id = $(this).val();
//alert(i);
$.ajax({
type: "POST",
url: RestoreProject,
data: "plan=<%= Model.RtpSummary.RtpYear %>"
+ "&id=" + id,
dataType: "json",
success: function(response, textStatus, XMLHttpRequest) {
if (response.error == "false") {
//$('').html(response.message);
//$('').addClass('success');
//autoHide(2500);
oProjectListGrid.fnAddData([
"<a href=\"/RtpProject/" + response.data.RtpYear + "/Info/" + response.data.ProjectVersionId + "\">" + response.data.Title + "</a>",
response.data.PlanType,
response.data.COGID,
response.data.TIPId,
response.data.ImprovementType,
response.data.SponsorAgency,
response.data.AmendmentStatus,
response.data.ProjectVersionId]);
countSuccess++;
removeProject(id, false, null);
} else {
countError++;
//$('.dialog-result').html(response.message + " Details: " + response.exceptionMessage);
//$('.dialog-result').addClass('error');
//autoHide(10000);
}
window.onbeforeunload = null;
},
error: function(response, textStatus, AjaxException) {
//alert("error");
countError++;
//$('').html(response.statusText);
//$('').addClass('error');
//autoHide(10000);
}
});
//alert(eachCount);
//eachCount--;
$("#countReady").text(eachCount + ", " + countError + ", " + countSuccess);
//alert(eachCount + ", " + countError + ", " + countSuccess);
if (eachCount-1 == i) { showRestoreResponse(countError, countSuccess); }
});
//alert("test");
return false;
});
解決方案！
首先非常感謝所有人，特別是@SLaks！其次，http://james.padolsey.com/javascript/monitoring-dom-properties/被記入一個小插件來監視一個對象。
我所做的是將我的原始變量轉換爲基本上被監視的對象。使用上面的jquery插件，我觀察了一個條件的對象：newVal == 0，其中newVal是eachCount的新值。該手錶每毫秒等待所有服務器響應返回給我，錯誤或成功。完成後，我會顯示發生的操作的一個很好的小總結報告。
我不太確定這是不是最好的方式，但它在屏幕上看起來不錯，我的眼睛不會傷害太糟糕。以下是我的解決方案。稍後，我將添加有關保留隊列中剩餘內容的活動記錄更新的建議。所有的代碼主要是我添加的調試。
$('#button-restore-projects').live("click", function() {
var element = $("#selectedProjects option");
var obj = { eachCount: element.length, countSuccess: 0, countError: 0 };
//$("#countReady").html(eachCount);
$.each(element, function(i, o) {
var id = $(this).val();
//alert(i);
$.ajax({
type: "POST",
url: RestoreProject,
data: "plan=<%= Model.RtpSummary.RtpYear %>"
+ "&id=" + id,
dataType: "json",
success: function(response, textStatus, XMLHttpRequest) {
if (response.error == "false") {
//$('').html(response.message);
//$('').addClass('success');
//autoHide(2500);
oProjectListGrid.fnAddData([
"<a href=\"/RtpProject/" + response.data.RtpYear + "/Info/" + response.data.ProjectVersionId + "\">" + response.data.Title + "</a>",
response.data.PlanType,
response.data.COGID,
response.data.TIPId,
response.data.ImprovementType,
response.data.SponsorAgency,
response.data.AmendmentStatus,
response.data.ProjectVersionId]);
obj.eachCount--;
obj.countSuccess++;
removeProject(id, false, null);
} else {
obj.countError++;
//$('.dialog-result').html(response.message + " Details: " + response.exceptionMessage);
//$('.dialog-result').addClass('error');
//autoHide(10000);
}
window.onbeforeunload = null;
},
error: function(response, textStatus, AjaxException) {
//alert("error");
obj.countError++;
//$('').html(response.statusText);
//$('').addClass('error');
//autoHide(10000);
}
});
//$("#countReady").text(eachCount + ", " + countError + ", " + countSuccess);
});
$(obj).watch('eachCount', function(propName, oldVal, newVal) {
//alert(newVal);
if (newVal == 0) {
showRestoreResponse(obj.countError, obj.countSuccess);
}
});
return false;
});
如果我一步一步通過代碼，我看到它觸發並更新數據庫。所以你說的是成功等到每個功能完成 – Tuck 2010-09-07 13:25:26
排序。 「成功」回調僅在服務器回覆後調用，通常在「each」調用完成之後。 – SLaks 2010-09-07 13:29:11
前進尋找一種方法來觀察ajax調用完成。您正在尋找解決方案的途徑。 – Tuck 2010-09-07 14:21:31