3
  $.ajax({
    type: "POST",
    url: "reservas.php",
    data: dataString,
    cache: false,
    beforeSend: function(){
        $('#submit-control').html("Procesando");

}

    })
    .done(function(html){
        alert(html);

        $('#form').trigger("reset");
    });
    }
    return false;
})

Apareció el problema de que podías hacer click muchas veces en el boton "enviar" y este procesaba todos esos envios, lo cual opte por solucionar "inhabilitando el boton" o mejor dicho haciendo que cuando le doy click este se cambia a un texto o gif que diga procesando.

El asunto es que despues no se como hacer para que el boton aparezca nuevamente luego de que se envía mediante php. En el codigo php emito un alert que dice mensaje enviado, me gustaria que despues de ese mensaje, apareciera mi boton nuevamente donde desaparecio.

1 respuesta 1

4

Precisamente así lo resuelvo yo: inhabilitando el botón que realiza la petición. La magia está en la línea btn.toggleClass('disabled'); en el beforeSend y en el always de la petición AJAX; es decir agregarle al botón antes de iniciar la petición la clase disabled, y al finalizar la petición, haya concluido o no con errores, volver a quitarle la clase disabled. Anhh y al dispararse el evento click del botón, lo primero que se verifica es que este no tenga la clase disabled, si es así, no se realiza la petición AJAX.

$("#btnSalvar").on('click', function(e) {
    e.preventDefault();
    var btn = $(this);
    if (!btn.hasClass('disabled')) {
        $.ajax({
            type: 'POST',
            url: $("#formulario").attr('action'),
            data: $("#formulario").serialize(),
            beforeSend: function() {
                btn.toggleClass('disabled');
                $('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
            }
        }).done(function(data) {
            console.log(data)
        }).fail(function(jqXHR) {                            
                $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);                            
        }).always(function() {
                if (!$('#indicador').hasClass("cargando-satisfactorio")) {
                    setTimeout(function() {
                        $('#indicador').fadeOut('fast', function() {
                            $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                        });
                    }, 3000);
                } else {                        
                        $('#indicador').fadeOut('fast', function() {
                            $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                        });                     
                }
            btn.toggleClass('disabled');                                
        });
    } else {
        return false;
    }
});
1
  • 1
    Mi pregunta es, ¿qué pasa si te pegan ese código en la consola con un for hasta el infinito? Me refiero solo al código ajax. el 10 ene. 2020 a las 13:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.