Question

我正在尝试跟踪每次迭代时的更新，当每次完成时，我想以优雅的方式向用户显示摘要。我已经尝试了几乎所有方法调用以更新页面上的元素，但除非我在事件调用中的任何一点触发警报，否则它将不会更新。

如果有人知道我可能缺少什么，我想看看它是如何完成的。非常感谢！

$('#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;
            });

Answer 1

$.ajax是一个立即返回的异步调用在服务器回复后，稍后将调用success回调。

因此，在each循环后，success个回调都没有运行。

Answer 2

问题看起来可能在于

$("#countReady").text(eachCount + ", " + countError + ", " + countSuccess);

当在ajax函数内调用成功和错误时，需要调用它。

这也不是最好的方法。实际上你应该使用与keep-alive的ajax连接并在一个POST中发送数据然后定期让你的PHP脚本以JSON格式发回最新状态：{ "countSuccess": "5", "countError", "0", "current": "5", "total": "10" }然后当current == total你知道它已经完成，显示一个详细说明结果的信息div。：）

在.each（）迭代之后，Jquery DOM没有更新

2 个答案: