Два POST при использовании 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 (я теряю сообщения об ошибках и исходные данные с сервера). Я могу воспроизвести эту проблему каждый раз. У кого-нибудь есть предложения относительно того, что здесь происходит?

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

Answer 1

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

В основном, когда я отправлял различные формы (через отдельные формы вкладок), мне пришлось вставлять опубликованную форму обратно на вкладку, чтобы пользователь мог видеть какие-либо обновления или ошибки, которые произошли с данными после обработки ПОСЛЕ. Таким образом, я делал это так (первоначально):

// 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 (данные) INJECTS, а не ЗАМЕНЯЕТ. В результате я был «вложенными» формами, которые вызывали всевозможные ошибки в других частях моего веб-сайта.

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

// 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); 
     } 
    }); 
} 

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