Ajax soumettre fait un post complet après le premier envoi

Question

Le premier envoi fonctionne comme prévu, mais la prochaine fois qu'il est entièrement publié. J'utilise le plugin jQuery.form, en particulier l'appel .ajaxSubmit(options) pour envoyer le formulaire. Il y a quelques niveaux de divs wrapper, mais je débogue le bouton.click lie et je n'arrive pas à comprendre pourquoi la seconde fois, même avec les mêmes variables, il fait un post complet et ma vue partielle est retournée sur un tout nouveau page. Ici, buttonid et screenid sont les mêmes sur les deux postes. J'indique cela parce qu'ils sont calculés selon une convention de nommage comme <name>Outer (emballage), <name> (cible de mise à jour), et <name>Form (formulaire soumis)

$('.formButton').click(function() { 
    var buttonid = $(this).attr('id'); 
    var screenid = $('#' + buttonid).closest('div:not(.CSRForm)').attr('id').replace('Outer', ''); 
    //appends a hidden element so I know which button was pressed when posted 
    $('#' + screenid + 'Form').append('<input type="hidden" name="submitButton" value="' + buttonid.replace(screenid, '') + '" />'); 
    $('#' + screenid + 'Form').submit(); 
}); 

esprit les .formButton éléments sont pas à l'intérieur du forme, c'est pourquoi j'ai dû lier l'événement de soumission en tant que tel. Mon vue partielle renvoie uniquement la forme et non sur les boutons (ils sont dynamiques)

ici est le .ajaxSubmit:

$('.CSRForm').submit(function() { 
    var needsValidation = "yes"; 
    if (needsValidation) { 
     $(this).ajaxSubmit({ 
      target: '#AccountSetup', 
      replaceTarget: false, 
      success: StepCallWithForm //to check whether the response is valid for redirecting 
     }); 
     return false; 
    } 
}); 

et mon action MVC si elle est pertinente:

public ActionResult AccountSetup(AccountSetupViewModel vm, string submitButton) 
    { 
     if (!ModelState.IsValid) 
     { 
      return PartialView(vm); 
     } 
     else 
     { 
      return Content(submitButton + ",AccountSetup"); 
     } 
    } 

Modifier : Après l'insertion de cette ligne immédiatement à l'intérieur de mon $(function() {:

$('#AccountSetup').ajaxForm(); 

J'ai été en mesure d'arrêter la publication complète. Dans Firebug, maintenant je vois ajax postback à /CSR/Home/CSR? qui est où tout ce truc est pour commencer. C'est comme si le formulaire avait perdu sa propriété d'action. Est-ce que mes événements se croisent d'une manière ou d'une autre?

Answer 1

au lieu de se lier à l'événement de clic, vous pouvez utiliser événement en direct() jQuery liant, qui survit à chargement AJAX. Vous pouvez le faire en remplaçant:

$('.formButton').click(function() { 

Avec

$('.formButton').live("click", function() { 

Answer 2

Cela peut se produire si vous remplacez le formulaire d'origine dans le rappel de réussite par la vue partielle. Par conséquent, lorsque vous supprimez certains éléments HTML (comme dans le cas du remplacement du code HTML existant par une vue partielle du serveur), tous leurs événements ont également disparu. Re-ajouter le même HTML (de votre point de vue) est juste un nouveau HTML pour le navigateur. Il ne fait pas d'hypothèses si ce nouveau HTML est lié à l'ancien code ou non. C'est pourquoi vous devez ajouter à nouveau toutes les fonctionnalités et tous les événements si vous voulez que le nouveau formulaire fonctionne comme auparavant.

Si c'est votre cas, le formulaire n'aura plus l'action submit Ajax attachée et donc la deuxième fois il effectuera un poste complet. Pour que cela fonctionne, il faut replacer le soumettre un événement dans la fonction succès:

$(function() { 
    ajaxifyForm(); 
}); 

function ajaxifyForm() { 
    $('#AccountSetup').ajaxForm({ 
     target: '#AccountSetup', 
     replaceTarget: false, 
     success: stepCallWithForm 
    }); 
} 

function stepCallWithForm(result) { 
    // If you replace the #AccountSetup form with the 
    // returned partial result you need to reattach the AJAX submit: 
    ajaxifyForm(); 
} 

Answer 3

Je sais que c'est une vieille question, mais je voulais juste ajouter mes 2 cents.

@ La réponse de Sohnee va fonctionner: live() fait le travail. Cependant, il a été deprecated.Il devrait être remplacé par on:

$("#WrapperDiv").on({ 
     click:myFunction 
    },"#formButton");