Deux POST lors de l'utilisation de jQuery

Question

J'utilise les onglets de l'interface utilisateur jQuery pour afficher un certain nombre de formulaires (chaque onglet peut contenir plusieurs formulaires). Lorsque je passe d'un onglet à l'autre, j'essaie de faire un POST des formulaires de l'onglet en utilisant les appels AJAX. Voici le jQuery pour ce que je fais.

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

Cela fonctionne dans IE et fonctionne partiellement dans Firefox. Sur certains onglets de Firefox, lorsque je passe d'un onglet à l'autre après quelques passages, deux messages rapides se succèdent (je peux le voir dans la console). Cela entraîne la publication des données incorrectes au HTML (je perds les messages d'erreur et les données d'origine du serveur). Je peux reproduire ce problème à chaque fois. Quelqu'un a des suggestions sur ce qui se passe ici?

Mise à jour: Ces problèmes se produisent systématiquement sur les mêmes onglets. Il n'y a rien de différent (ou pas de similarité) entre les onglets qui fonctionnent et ceux qui échouent. En ce qui concerne les données POSTed quand deux se produisent rapidement dans une rangée, le premier POST ne contient aucune donnée (AKA, je ne pense pas que la sérialisation se passe correctement) et le deuxième POST est le bon formulaire, mais il n'a aucun des changements que j'ai fait au formulaire (parce que le premier POST a réinitialisé le formulaire).

Answer 1

Il s'est avéré que le problème était très simple (les "plus gros" bogues sont toujours). Fondamentalement, lorsque je soumettais les différents formulaires (via les formulaires à onglets individuels), je devais réinjecter le formulaire posté dans l'onglet afin que l'utilisateur puisse voir les mises à jour ou les erreurs qui se sont produites aux données après le traitement de la POSTER. Alors, je faisais que comme celui-ci (à l'origine):

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

Ce que je ne savais pas (essentiellement en raison d'une « lecture fail ») est que la méthode .html (données) INJECTE plutôt que REMPLACE. Par conséquent, j'étais en train d'imbriquer des formulaires qui causaient toutes sortes d'erreurs dans d'autres parties de mon site Web.

En conséquence, quand j'ai changé le code de sorte qu'il injecte dans le parent (comme le code suivant), il a parfaitement fonctionné, et a également fixé quelques autres problèmes que je rencontrais:

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

Lecture de la documentation ... toujours une bonne chose ...