JQuery DOM не обновляется после итерации .each () - PullRequest
1 голос
/ 07 сентября 2010

Я пытаюсь отслеживать обновления по мере того, как каждый из них повторяется, и когда каждый из них завершен, я хотел бы показать пользователю изящную информацию. Я пытался почти все для вызова метода, чтобы обновить элемент на странице, но если я не отключу оповещение в любой момент вызова события, оно не будет обновлено.

Если кто-нибудь знает, чего мне не хватает, я бы хотел посмотреть, как это делается. Большое СПАСИБО заранее!

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

Ответы [ 2 ]

1 голос
/ 07 сентября 2010

$.ajax - это асинхронный вызов, который немедленно возвращается.
Обратный вызов success вызывается позже, после ответа сервера.

Следовательно, после цикла each ни один из обратных вызовов success еще не запущен.

0 голосов
/ 07 сентября 2010

Проблема выглядит так, как будто она может лежать в

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

Это нужно вызывать, когда в ajax-функции вызывается успех и ошибка.


Кроме того, это действительно не лучший способ сделать это. На самом деле вы должны использовать ajax-соединение с keep-alive и отправлять данные в одном POST, а затем периодически делать так, чтобы ваш PHP-скрипт возвращал последнее состояние в формате JSON: { "countSuccess": "5", "countError", "0", "current": "5", "total": "10" } затем, когда текущий == итого вы знаете, что он завершен, показывайте информацию div, детализирующий результаты. :)

...