Cómo enviar publicaciones con jquery onsubmit pero aún enviar el formulario

Question

Quiero activar esta función, que utiliza el método de publicación de jquery, cuando se envía un formulario:

function update_point_session(){
    $.post('/update_point_session/', 
           {session: true},
           function(data){}
    );
    return true;
}

Yo uso el onsubmit para activarlo.

El problema es que no lo enviará cuando se envíe el formulario. Pero si return false; lo hará (aunque el formulario en sí, por supuesto, no lo hará). Parece que $.post no se envía antes de que el formulario dirija la página a otra.

Así que creo que de alguna manera tengo que return true; DESPUÉS de $.post. Traté de hacer esto poniéndolo dentro de function(data){} pero no funcionó ...

¿Cómo puedo enviar AMBOS la publicación desde jquery y desde el formulario?

javascript jquery forms

1

tmpethick 11 jun. 2011 a las 23:30

Answer 1

Hay un par de cosas que puedes hacer.

Hacer el AJAX sincrónico

Como $.post es, de acuerdo con la documentación, equivalente a

$.ajax({
    type: 'POST',
    url: url,  
    data: data,
    success: success  
    dataType: dataType
});

Simplemente puede reemplazar $.post con la llamada equivalente $.ajax, y también agregar async: false a las opciones. Esto enviará el formulario con AJAX y luego, debido a return true; de la función, también permitirá que el navegador publique el formulario normalmente.

Envíe el formulario solo después de que AJAX complete

Esto implica un malabarismo de controlador de eventos:

// attach submit event handler to the form
$("#myform").submit(function() { 
    // Handler immediately detaches itself, so that
    // we don't have an infinite loop when we call
    // $(this).submit() ourselves below
    $(this).unbind('submit');

    // Do the AJAX
    $.post(
        '/update_point_session/', 
        {session: true},
        function(data){
            // When the AJAX completes, tell the browser
            // to re-submit the form
            $(this).submit();
        }
    );

    // Prevent the browser from submitting it NOW,
    // because the AJAX is still running
    return false;
});

3

Jon 11 jun. 2011 a las 19:54

Answer 2

Haría algo como esto.

$('form#myFormId').submit(function(evt){
    var form = $(this);
    evt.preventDefault(); // Prevents default submission
    $.post('/update_point_session/', {session: true}, function(data){
        form.unbind('submit'); //Unbind js submit event
        form.get(0).submit(); //submit the form
    });
});

0

seanh 11 jun. 2011 a las 19:43

Answer 3

Debe esperar a que se complete la publicación asincrónica antes de descargar la página. Puede devolver una URL de redireccionamiento desde el servidor como json algo así:

$('form').submit(function(e){
    $.post(this.action || '/update_point_session/', $(this).serialize(), function(data){
        // send back a redirect url from the server
        if(data.url) location.href = data.url;
    });
    e.preventDefault()
});

0

Josiah Ruddell 11 jun. 2011 a las 19:37

Cómo enviar publicaciones con jquery onsubmit pero aún enviar el formulario

3 respuestas

Hacer el AJAX sincrónico

Envíe el formulario solo después de que AJAX complete

Preguntas relacionadas

Nuevas preguntas

javascript