Par défaut soumettre le formulaire comportement après jQuery forms.js ajaxSubmit exécute

Je suis en utilisant jQuery Forme de Plugin pour lier la soumettre des événements pour les deux formes sur la même page, de sorte qu'ils sont soumis à séparer les scripts PHP de retour de balisage pour séparer les divs sur la page.

Une forme actualise la prochaine. J'ai une utilisation "live" de sorte que chaque forme a ses événements reliés lorsqu'il est actualisé:

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

So far So good. Chaque formulaire peut être soumis de nouveau et de nouveau avec l'ajax et toutes les liaisons de la survie, d'un soumettre à la prochaine.

Le problème se pose lorsque j'essaie de lier une troisième forme et le feu de ses soumettre dans la "réussite" de la deuxième forme:

/* 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 s'exécute correctement, mais ensuite le formulaire par défaut de soumettre est effectuée, causant la page se recharge. Remarquez que je n'inclure le "return false;" pour supprimer la forme par défaut de soumettre, mais pour quelque raison il soumet toute façon.

J'ai trouvé que si je "bind" sur le Formulaire 3 de "soumettre" l'événement dans le Formulaire 2 de la réussite de la fonction avec les mêmes options que le "live" pour la formule 3, la forme par défaut de soumettre n'est pas effectuée. C'est redondant, même si, et si je peux je voudrais éviter de le faire.

Comment puis-je supprimer le Formulaire 3 par défaut de présenter des comportements?

OriginalL'auteur Keyslinger | 2009-03-22

3

Ne sais pas si c'est lié à ton problème, mais live() ne prend pas en charge le "envoyer" événement:

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

OriginalL'auteur Crescent Fresh
0

Je sais que ça doit être la même, mais puisque cela semble vraiment un comportement étrange, je voudrais essayer de remplacer
```
$('#frmLookup').submit();
```
pour
```
$('#frmLookup').trigger('submit');
```
pour voir si cela change quelque chose?

OriginalL'auteur Seb

Merci, crescentfresh, pour pouvoir me mettre sur la bonne voie. Pour ma solution, j'ai modifié mes scripts pour imprimer uniquement les éléments imbriqués à l'intérieur des formes, par opposition aux formes elles-mêmes et de leur contenu. J'ai ensuite changé la "cible" de chaque formulaire pour le formulaire suivant à la place de la div contenant le formulaire suivant. Ceci élimine le besoin de re-lier l'événement submit pour chaque forme depuis l'ajax fonction de la forme précédente simplement remplace ses éléments internes au lieu de "rafraîchissant" tout à fait.

J'ai aussi décidé qu'il était approprié de faire disparaître la forme de plugin et tout simplement utiliser ".serialize()" avec ".ajax" comme illustré par Paolo Bergantino ici.

Mon produit final ressemble à quelque chose comme 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;
});

OriginalL'auteur Keyslinger

Vous devez vous connecter pour publier un commentaire.