Два сообщения при использовании jQuery

Question

Я использую вкладки пользовательского интерфейса jQuery для отображения количества форм (каждая вкладка может содержать более одной формы). Когда я переключаюсь между вкладками, я пытаюсь выполнить POST для форм вкладок, используя вызовы AJAX. Вот jQuery для того, что я делаю.

select: function (event, ui) {
        var tab_index = $('#tabs').tabs('option', 'selected');
        var panel_id = $("ul li a:eq(" + tab_index + ")", this).attr("href");
        var panel = $(panel_id); // the content of the tab

        // For each form in the panel, submit it via AJAX and update its HTML accordingly.
        $(panel).find("form").each(function () {
            var that = this;
            $.post($(this).attr("action"), $(this).serialize(), function (data, success) {
                if (success) {
                    $(that).html(data);
                }
            });
        });
    },

Это работает в IE и частично работает в Firefox. На некоторых вкладках в Firefox, когда я переключаюсь между вкладками через несколько раз, два быстрых сообщения происходят последовательно (я вижу, что это происходит в консоли). Это приводит к тому, что неверные данные отправляются обратно в HTML (я теряю сообщения об ошибках и исходные данные с сервера). Я могу воспроизвести эту проблему каждый раз. У кого-нибудь есть предложения относительно того, что здесь происходит?

Обновление : проблема возникает последовательно на одних и тех же вкладках. Ничего явно не отличается (или нет сходства) между вкладками, которые работают, и теми, которые не работают. Что касается данных POST, когда два события происходят быстро подряд, первый POST не содержит данных (AKA, я не думаю, что сериализация происходит правильно), а второй POST - правильная форма, но он не имеет никаких изменений что я сделал в форме (потому что первый POST сбросил форму).

Answer 1

Оказалось, что проблема была очень простой («самые большие» ошибки всегда есть).

Обычно, когда я отправлял различные формы (через отдельные формы вкладок), мне приходилось вставлять опубликованную форму обратно во вкладку, чтобы пользователь мог видеть любые обновления или ошибки, произошедшие с данными после обработки POST. , Итак, я делал это так (изначально):

// Post a form when it has been submitted.
function postForm(form) {
    $.post($(form).attr("action"), $(form).serialize(), function (data, success) {
        if (success) {
            $(form).html(data);
        }
    });
}

Что я не знал (в основном из-за «сбоя чтения»), так это то, что метод .html (data) ВНУТРИ, а не ЗАМЕНЯЕТ. В результате я «вкладывал» формы, которые вызывали всевозможные ошибки в других частях моего сайта.

В результате, когда я изменил код, чтобы он вставлялся в родительский (как в следующем коде), он работал отлично, а также исправил несколько других проблем, которые у меня были:

// Post a form when it has been submitted.
function postForm(form) {
    $.post($(form).attr("action"), $(form).serialize(), function (data, success) {
        if (success) {
            // Inject the resulting form back into the parent of the page.
            var parent = $(form).parent();
            parent.removeData($(form));
            parent.html(data);
        }
    });
}

Чтение документации ... всегда хорошо ...