entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Cuenta atrás y redicionamiento con Jquery

Estoy haciendo un formulario que al enviar primero valida los datos y si son incorrectos te sale una advertencia y un enlace para volver al formulario y si esta todo correcto, te sale un mensaje diciéndote que esta todo correcto y debería haber una cuenta de 5 a 0 y posteriormente un redicionamiento a la página de inicio, digo debería porque no consigo hacer una simple cuenta atras, pongo el código

$(document).ready(function() {
$("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();   

            var seccion = $(this).attr("id").valueOf();

            $.ajax({
                type: type,
                url: url, /*---> si le pongo aquí la página a la que quiero que vaya, lo hace tanto si se valida el form como si no */
                data: cadena,               
                success: function(data) {
                    if (data) {             
                        //return;
                        for (var i = 5; i > 0; i--) {
                            $("h3#cuentaatras").text("(" + i + ")")  
                        }
                        $(".section").html(data); 

                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        });    

  }); 
<h3 id="cuentatras">(5)</h3>

¿Como hago una simple cuenta atras y que luego se redireccione hacía la página que quiera con jquery? Sin usar plugins porque lo que entiendo que quiero es algo muy sencillo.

Saludos

2 Respuestas

3votos

magarzon Puntos30650

Utilizando tu mismo código y sin complicarme mucho (se podría hacer mejor):

$(document).ready(function() {
$("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();   

            var seccion = $(this).attr("id").valueOf();

            $.ajax({
                type: type,
                url: url, /*---> si le pongo aquí la página a la que quiero que vaya, lo hace tanto si se valida el form como si no */
                data: cadena,               
                success: function(data) {
                    if (data) {             
                        var contador = 5;
                        var contadorElem = $("h3#cuentaatras");
                        contadorElem.text(contador);
                        setInterval(function() {
                            contadorElem.text(contador);
                            if (--contador == 0) {
                                window.location.href='url a la que quieras ir';
                        }, 1000;

                        $(".section").html(data); 

                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        });    

  }); 

0voto

bichomen comentado

gracias @magarzon despues de algunos cambios lo he conseguido:

$("body").on("submit", "form", function( event ) {
            $(this).replaceWith('Pensando...');

            event.preventDefault();             

            var type = "POST";  
            var url = $(this, "form").prop("action");   
            var cadena = $(this, "form").serialize();                   

            $.ajax({
                type: type,
                url: url,
                data: cadena,   
                success: function(data) {
                    if (data) {             
                        $(".section").html(data);                       
                        var ca = $("h3#cuentaatras").prop("class"); 

                        if (ca == "exito") {
                            var contador = 5;
                     var contadorElem = $("h3#cuentaatras");
                     contadorElem.text("(" + contador + ")");
                     setInterval(function() {
                        contadorElem.text("(" + contador + ")");
                        if (--contador == 0) {
                            window.location.href='url';
                        }
                     }, 1000);
                  }
                  else {    
                    $(".section").html(data); 
                        } 
                    }                   
                    else {
                        alert("Data no tiene valor");
                    }           
                }
            });
        });    

0voto

bichomen comentado

else { $(".section").html(data); }

Esta parte del código sobra.

2votos

Leonardo-Tadei Puntos227320

Hola @bichomen,

para una simple cuenta atrás y la redirección, ni siquiera hace falta usar JQuery:

...
setTimeout(window.location('pagina_destino.php'),5000);
...

Si querés mostrar una cuenta regresiva al usuario, crear una función para llamar en setTimeout() y un contador para saber si se refresca el contador o se redirige.

Acá te dejo la referencia de la función y unos ejemplos de uso.

Saludos cordiales

0voto

bichomen comentado

Ya pero no funciona, ya que lo yo quiero es recargar solo un div y no toda la página, la web funciona con jquery para los enlaces y si pongo esto en la parte del código donde quiero que lo haga, simplemente no hace nada.

<script type="text/javascript">         setTimeout(window.location('contenido.php'),5000);
            </script>   

0voto

magarzon comentado

@Leonardo-Tadei setTimeout solo te permite ejecutar una vez después deberías volver a ejecutar el setTimeout (si no tuviera que redireccionar). Con setInterval puedes ejecutar código cada x tiempo.

Además, window.location es de solo lectura, para navegar tienes que hacer window.location.href = 'lo que sea'; o bien window.location.assign('lo que sea');

0voto

Leonardo-Tadei comentado

Sí, me faltó el HREF en el LOCATION... tenemos que pedirte a Peter que el editor de texto tenga un autocompletar ;-)

Para actualizar el contador, tal como digo en mi respuesta y mostrás en código, un contador y manejar el control dentro de la función.

1voto

Leonardo-Tadei comentado

Y de dónde sale, @bichomen, en contenido a cargar en el DIV???

0voto

bichomen comentado

Por la estructura de la web, se cargan las páginas en un div especifico a través de ajax

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta