success - jquery ajax formulario presenta dos veces

jquery ajax example

Question

Tengo un formulario que estoy capturando a través de jquery y envío a través de ajax. Mi problema es que el formulario se envía más de una vez cada vez que actualizo la página.

Intenté desvincular el botón Enviar, pero luego el formulario se publica normalmente después del primer envío. Cualquier ayuda sería apreciada

$(''#exportForm'').submit(function() {

  $.ajax({
    type: "POST",
    url: $(this).attr(''action''),
    data: $(this).serialize(),
    success: function(response) {
      $(''#exportForm'').unbind(''submit'');
      console.log(response);
    }
  });

  return false;
});

Answer 1

Además de invocar preventDefault, también llame a stopImmediatePropagation en el evento.

$(''#exportForm'').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( ''action'' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});

Answer 2

Como señaló Chris Sercombe, e.stopImmediatePropagation () funciona y definitivamente soluciona el problema, pero no debería tener que usarlo. El problema todavía existe en su código en alguna parte. Permítanme mencionar un ejemplo de cómo se pueden enviar dos solicitudes de envío:

Si está utilizando AngularJS, y digamos que crea un controlador llamado "HandleAjaxController", puede asignar este controlador ng a un div, y luego, accidentalmente, asignar este mismo controlador ng a un div interno. Esto provocaría que la solicitud de publicación se envíe dos veces. Asi que:

    <div ng-controller=''HandleAjaxController''>
        <div ng-controller=''HandleAjaxController''>
            <button id="home" type="button" class="btn btn-success">Send data</button>

Esto me causó mucho estrés una vez porque en mi ng-route había configurado el controlador aquí:

    $routeProvider
    .when("/", {
        templateUrl : "src/js/partials/home.html",
        controller : "HandleAjaxController"
    })

y luego lo configuro nuevamente en mi home.html: <div ng-controller=''HandleAjaxController''>

De todos modos, ese es un ejemplo de cómo se pueden enviar dos publicaciones.

Answer 3

Debe verificar su otro código js, ​​tal vez en algún lugar que dispare dos veces el evento "enviar". Esto sucedió en mi caso, me olvido de "devolver falso" en el controlador de clic para un botón

Answer 4

El problema se puede resolver utilizando un div en lugar de un botón en su formulario php. No se necesita un botón debido al uso de ajax.

Answer 5

En caso de que esté utilizando algún tipo de validación (p. Ej., Validación de jQuery), el formulario se envía dos veces porque, aparte de $(''#exportForm'').submit usted mismo, el complemento de validación también enviará el formulario después de validar correctamente todos los campos .

NB: si está utilizando la validación jQuery, evite utilizar .submit() . En su lugar, utilice submitHandler .

Answer 6

Es muy probable que esté utilizando un button o submit para activar el evento ajax. Prueba esto:

$(''#exportForm'').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr( ''action'' ),
            data: $(this).serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });

Answer 7

He añadido jquery.unobtrusive-ajax.min.js ref dos veces como se responde aquí https://.com/a/15041642/4412545

Answer 8

Simplemente puede usar e.stopImmediatePropagation(); :

Por ejemplo :

$(''#exportForm'').submit(function(e){
    e.stopImmediatePropagation();