Comment faire un Callback Jquery après l'envoi du formulaire ?

Question

J'ai un formulaire simple avec remote=true.

Ce formulaire se trouve en fait dans une boîte de dialogue HTML, qui se ferme dès que l'on clique sur le bouton "Submit".

Maintenant, je dois faire quelques changements sur la page HTML principale après que le formulaire ait été soumis avec succès.

J'ai essayé de le faire en utilisant jQuery. Mais cela ne garantit pas que les tâches soient exécutées après une certaine forme de réponse à la soumission du formulaire.

$("#myform").submit(function(event) {

// do the task here ..

});

Comment attacher un callback, de sorte que mon code ne soit exécuté qu'une fois le formulaire soumis avec succès ? Existe-t-il un moyen d'ajouter un callback .success ou .complete au formulaire ?

Answer 1

Je viens de faire ça -

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 

   });

Et tout a fonctionné à merveille.

Voir la documentation de cette api pour des détails plus spécifiques.

Answer 2

Je n'ai pas réussi à faire fonctionner la solution numéro un des votes positifs de manière fiable, mais j'ai découvert que cette solution fonctionne. Je ne sais pas si c'est obligatoire ou non, mais je n'ai pas d'attribut action ou method sur la balise, ce qui garantit que le POST est traité par la fonction $.ajax et vous donne l'option de rappel.

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>

Answer 3

Vous devrez faire les choses manuellement avec un appel AJAX au serveur. Pour ce faire, vous devrez également modifier le formulaire.

Mais ne vous inquiétez pas, c'est un jeu d'enfant. Voici un aperçu de la manière dont vous allez travailler avec votre formulaire :

• Remplacer l'action d'envoi par défaut (grâce à l'objet d'événement transmis, qui a un objet preventDefault méthode)
• récupérer toutes les valeurs nécessaires du formulaire
• lancer une requête HTTP
• traiter la réponse à la demande

Tout d'abord, vous devrez annuler l'action d'envoi du formulaire comme suit :

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

Et ensuite, saisissez la valeur des données. Supposons que vous ayez une zone de texte.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

Et ensuite envoyer une demande. Supposons que c'est une requête POST.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

Et ça devrait le faire.

Note 2 : Pour l'analyse syntaxique des données du formulaire, il est préférable d'utiliser un fichier de type plugin . Il vous facilitera la vie et fournira une sémantique agréable qui imite l'action réelle d'envoi d'un formulaire.

Note 2 : Vous n'êtes pas obligé d'utiliser des defers. C'est juste une préférence personnelle. Vous pouvez également faire ce qui suit, et cela devrait fonctionner aussi.

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

Answer 4

Pour MVC, il existe une approche encore plus simple. Vous devez utiliser le formulaire Ajax et définir les AjaxOptions

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

Voici le code de soumission, qui se trouve dans la section du document prêt et qui lie l'événement onclick du bouton à la soumission du formulaire.

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

voici le callback référencé dans les AjaxOptions

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

dans la méthode du contrôleur pour MVC, cela ressemble à ceci

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}

Answer 5

Je ne crois pas qu'il existe une fonction de rappel comme celle que vous décrivez.

Ce qui est normal ici, c'est d'effectuer les modifications à l'aide d'un langage côté serveur, comme le PHP.

En PHP, vous pouvez par exemple récupérer un champ caché de votre formulaire et effectuer des modifications s'il est présent.

PHP :

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

Une façon de procéder dans Jquery est d'utiliser Ajax. Vous pourriez écouter submit, renvoyer false pour annuler son comportement par défaut et utiliser jQuery.post() à la place. jQuery.post a un success-callback.

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/