Come fare un Jquery Richiamata dopo l’invio del form?

Ho un semplice form con telecomando=true.

Questa forma è in realtà un Dialogo HTML, che viene chiusa non appena il pulsante di invio è cliccato.

Ora ho bisogno di fare alcune modifiche sulla principale pagina HTML dopo che il modulo viene inviato con successo.

Ho provato a farlo utilizzando jQuery. Ma questo non garantisce che i compiti vengono eseguiti dopo una qualche forma di risposta del modulo di presentazione.

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

//do the task here ..

});

Come posso allegare un callback, in modo che il mio codice viene eseguito solo dopo che il modulo è stato inviato correttamente? C’è un modo per aggiungere un po .il successo o il .completo di callback per la forma?

  • Perchè non usare Ajax? Con jQuery Ajax funzioni che si possono definire tali funzioni di callback.
  • davidbuzatto, ci sono alcuni casi in cui non è possibile utilizzare ajax. Per esempio, quando si desidera caricare un file.
  • Non è vero, qui in futuro.

 

6 Replies
  1. 110

    Ho appena fatto questo –

     $("#myform").bind('ajax:complete', function() {
    
             //tasks to do 
    
    
       });

    E le cose hanno funzionato perfettamente .

    Vedere questa documentazione delle api per dettagli più specifici.

    • Wow… ho appena imparato qualcosa di nuovo. Sì, da quanto sembra, questa è la più semplice soluzione. Forse, è anche il migliore. Io sono un appassionato di Coding Horror lettore, e in questo blog, Jeff Attwood sottolinea che si dovrebbe scrivere meno codice, e questo metodo consente di ottenere che. Bene trovare. 🙂
    • La prego di dirmi come si può usare ajax:completa quando vincolante tuo stato di forma? non abbiamo trovato alcun proprietà relative ad un modulo come ‘ajax:completa’.
    • Ajax:completa può essere collegato a qualsiasi Ajax Evento . Quando l’evento è completa , questo viene attivato . Nel mio form ho usato remoto “=true” – il che significa che il modulo viene inviato tramite Ajax . Così u può allegare un ajax:completa il modulo di submissionhttp://api.jquery.com/ajaxComplete/
    • E se il <form> è submited di solito ? (Non intendo con Ajax) Cosa posso mettere nel primo argomento di .bind() ? EDIT : beh, credo click. Nvm, mi dispiace. :p
    • attenzione: questo sta andando a fuoco la vostra funzione dopo il completamento di tutti ajax evento, non solo l’invio del modulo (se non mi sbaglio, nel qual caso mi piacerebbe per voi di fornire un link dove hai trovato questa)
    • Questo non sembra funzionare se il modulo viene creato dinamicamente, come nel seguente esempio: var form = $("<form>", {'action': 'somepath.html','method':'post'}).bind('ajax:complete', function() {console.log("AJAX COMPLETE");});
    • “Come jQuery 1.8, l’ .ajaxComplete() il metodo deve essere allegato il documento”
    • Dove è ‘ajax:completa’ definito? In jQuery docs, è “ajaxComplete”. api.jquery.com/Ajax_Events
    • Mai mente. Trovato qui: github.com/rails/jquery-ujs/wiki/ajax
    • Non funziona a me, usando la normale Forma, con un pulsante, ma il pulsante di chiamate javascript $(‘#formFile’).submit();
    • Inoltre, non ha funzionato per me. Ho creato un modulo dinamico e ha attivato l’invio, ma dopo, quando ho avuto la risposta dall’ajax, listener con l’ajax:completa non attivato.
    • grazie a voi – sapete come posso riuscire vincolante per un generati dinamicamente form?
    • Questo non funzionerà per un generati dinamicamente forma come è. Avrete bisogno di usare qualcosa come api.jquery.com/live o api.jquery.com/on per soddisfare elementi dinamici.
    • Se questo non funziona per voi, come nel caso di generato dinamicamente forma la soluzione dovrebbe essere quella di associare l’ascoltatore in un documento come questo: `$(document).bind(‘ajax:completa’, “#my-forma”, function() { this.doesFoo(); });
    • curiosi come questo ha molto più upvotes e non si applica alle forme normali (inviato con un pulsante di invio). La risposta da Bradley è più completa e spiega come questo si potrebbe “lavoro” (se non includono un successo di callback, che non ha alcun senso).

  2. 29

    Non ho potuto ottenere il numero di una soluzione con voto positivo per funzionare in modo affidabile, ma hanno scoperto che questo funziona. Non so se è obbligatorio o meno, ma non ho un metodo o azione attributo del tag, che garantisce il POST è gestita dal $.ajax funzione e ti dà l’opzione di richiamata.

    <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>
    • +1. La chiave di questo è la risposta $(this).serialize() linea. Esso consente di utilizzare jQuery.ajax() a presentare il modulo esistente sullo sfondo, poi prendere la risposta dal server e fare qualcosa con esso.
    • javascript senza il punto e virgola… alcune persone vogliono solo vedere il mondo bruciare. La tua soluzione funziona, anche se, così, grazie 🙂
    • Nota che .serialize non include file di input Postato la richiesta. Utilizzare l’HTML5 FormData (vedi questa domanda), invece, a meno che non si stanno sostenendo i vecchi browser come IE < 9
    • Oggetti di scena per l’utilizzo di $(this).serialize(), ha risolto i miei problemi!
    • che cosa è ‘form_selector’ in html a cui si fa riferimento in js?
    • e ‘ l’id del form… la Stessa cosa come “#myform” nella registrazione originale.
    • In realtà Eslint si consiglia di non utilizzare inutili punti e virgola, e non si brucia il mondo 🙂 @viggity. La soluzione funziona perfettamente per me, grazie.
    • Che lint regola è extra semi-colon. Non scoraggiare l’uso di loro, dice solo che non uso due, quando uno è sufficiente. Io d’accordo con viggity, non renderà il mondo brucia, o almeno il codice quando qualcuno accidentalmente rimuove un’interruzione di riga.

  3. 24

    Dovrete fare le cose a mano con una chiamata AJAX al server. Questo sarà necessario per eseguire l’override del modulo.

    Ma non preoccupatevi, è un pezzo di torta. Ecco una panoramica su come ti andare a lavorare con la tua forma:

    • ignorare l’impostazione predefinita azione di invio (grazie per il passato in oggetto evento, che ha un preventDefault metodo)
    • afferrare tutti i valori richiesti dal modulo
    • fuoco spento una richiesta HTTP
    • gestire la risposta alla richiesta

    Prima, dovrete annullare l’invio di form azione in questo modo:

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

    E poi, afferrare il valore dei dati. Proviamo a pensare si dispone di una casella di testo.

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

    E poi a fuoco spento una richiesta. Proviamo a pensare è una richiesta 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.
        });
    });

    E questo dovrebbe su di esso.

    Nota 2: Per l’analisi di dati del modulo, è preferibile utilizzare un plugin. Si renderà la vostra vita molto facile, oltre a fornire un bel semantica che imita un effettivo invio di form azione.

    Nota 2: non È necessario utilizzare rinvia. È solo una preferenza personale. È possibile anche effettuare le seguenti operazioni, e dovrebbe funzionare, troppo.

    $.post("http://somewhere.com", { val: val }, function () {
        //Start partying here.
    }, function () {
        //Handle the bad news here.
    });
    • Grande campione. Come fare la stessa cosa con upload di file (multipart/form-data) ???
  4. 8

    Per MVC qui è un approccio più semplice.
    È necessario utilizzare l’Ajax modulo e impostare la AjaxOptions

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

    qui è la presentazione di codice, questo è il documento pronto sezione e i legami, l’evento onclick del pulsante per inviare il modulo

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

    qui è richiamata con riferimento al AjaxOptions

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

    nel metodo di controller per MVC sembra che questo

    [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");
        }
    }
    • Quelle del codice sono .Net codici, e nella domanda non è specificato.
    • Che in realtà non è una buona ragione per questo voto. La risposta opere e potrebbe aiutare .NET developer che si trova ad affrontare lo stesso problema.
  5. 7

    Non credo ci sia un richiamata in funzione di come quello che tu descrivi.

    Ciò che è normale qui è fare le modifiche utilizzando un qualche linguaggio lato server, come PHP.

    In PHP è, per esempio, potrebbe recuperare un campo nascosto da un modulo e fare alcune modifiche, se è presente.

    PHP:

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

    Un modo per andare su di esso in Jquery è quello di utilizzare Ajax. Si potrebbe ascoltare per inviare, return false per annullare il suo comportamento di default e l’utilizzo di jQuery.post (), invece. jQuery.post ha un successo-richiamata.

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

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

  6. 0
    $("#formid").ajaxForm({ success: function(){ //to do after submit } });
    • È ajaxForm() un componente di terze parti installati? Non è una parte standard di jQuery.
    • Si tratta di un plugin davvero. malsup.com/jquery/form

Lascia un commento