Comportement de soumission de formulaire par défaut après jQuery forms.js ajaxSubmit exécute

Question

J'utilise jQuery Form Plugin pour lier les événements de soumission de deux formulaires sur la même page afin qu'ils soient soumis à des scripts PHP séparés qui renvoient le balisage pour séparer les divs la page.

Une forme actualise la suivante. J'utilise « live » de sorte que chaque forme a ses événements liés à nouveau quand il est rafraîchi:

$(document).ready(function() { 
    /* Form 1 */ 
    $('#frmSearch').live('submit', function() { 
     $(this).ajaxSubmit({ 
      target: '#divResults', 
      url: 'search_div.php' 
     }); 
     return false; 
    }); 
    /* Form 2 */ 
    $('#frmResults').live('submit', function() { 
     $(this).ajaxSubmit({ 
      target: '#divLookup', 
      url: 'lookup_div.php', 
     }); 
     return false; 
    }); 
}); 

Jusqu'à présent, si bon. Chaque formulaire peut être soumis à plusieurs reprises avec ajax et toutes les liaisons survivent d'une soumission à l'autre.

Le problème se pose lorsque je tente de lier une troisième forme et tirer le soumettre événement dans l'option de la seconde forme de « succès »:

/* Form 2 */ 
$('#frmResults').live('submit', function() { 
    $(this).ajaxSubmit({ 
     target: '#divLookup', 
     url: 'lookup_div.php', 
     success: function(responseText){ 
      $('#frmLookup').submit(); 
     } 
    }); 
    return false; 
}); 
/* Form 3 */ 
$('#frmLookup').live('submit', function() { 
    $(this).ajaxSubmit({ 
     target: '#divMappings', 
     url: 'mapped_items_div.php', 
    }); 
    return false; 
}); 

Quand je fais cela, le ajaxSubmit exécute avec succès mais la La soumission par défaut du formulaire est également effectuée, entraînant le rechargement de la page. Notez que j'inclus le "return false"; pour supprimer la soumission par défaut du formulaire, mais pour une raison quelconque, il est soumis de toute façon.

J'ai trouvé que si je "lie" sur l'événement "submit" de Form 3 dans la fonction de succès du Formulaire 2 avec les mêmes options que le "live" pour Formulaire 3, l'envoi par défaut du formulaire n'est pas effectué. C'est redondant, cependant, et si je peux, je voudrais éviter de le faire. Comment puis-je supprimer les comportements de soumission par défaut de Formulaire 3?

Answer 1

Merci, crescentfresh, pour moi d'obtenir sur la bonne voie. Pour ma solution, j'ai modifié mes scripts pour n'imprimer que les éléments imbriqués dans les formulaires par opposition aux formulaires eux-mêmes et à leur contenu. J'ai ensuite changé la "cible" de chaque forme à la forme suivante au lieu de la div contenant le formulaire suivant. Cela élimine le besoin de re-lier l'événement submit pour chaque formulaire puisque la fonction ajax de la forme précédente remplace simplement ses éléments internes au lieu de la "rafraîchir" complètement.

J'ai également décidé qu'il était approprié de supprimer le plugin de formulaire et d'utiliser simplement ".serialize()" avec ".ajax" comme illustré par Paolo Bergantino here.

Mon produit final ressemble à ceci:

/* Form 1 */ 
$('#frmSearch').bind('submit', function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'result_form.php', 
     data: formdata, 
     success: function(responseText){ 
      $('#frmResults').html(responseText); 
     } 
    }); 
    return false; 
}); 

/* Form 2 */ 
$('#frmResults').bind('submit', function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'lookup_div.php', 
     data: formdata, 
     success: function(responseText){ 
      $('#frmLookup').html(responseText); 
      $('#frmLookup').trigger('submit'); 
     } 
    }); 
    return false; 
}); 

/* Form 3 */ 
$('#frmLookup').bind('submit', function() { 
    var formdata = $(this).serialize(); 
    $.ajax({ 
     url: 'mapped_items_div.php', 
     data: formdata, 
     success: function(responseText){ 
      $('#divMappings').html(responseText); 
     } 
    }); 
    return false; 
}); 

Answer 2

je sais que ce doit être le même, mais étant donné que cela semble un comportement vraiment étrange, je voudrais essayer de remplacer

$('#frmLookup').submit(); 

pour

$('#frmLookup').trigger('submit'); 

pour voir si cela change quelque chose?

Answer 3

Je ne sais pas si elle est liée à votre problème, mais live() does not support the "submit" event:

pas pris en charge: blur, focus, mouseenter, mouseleave, change, submit