No puedo Redireccionar en Jquery

thedenis · #1 (**permalink**) 26/08/2014, 10:43

Hola a todos..

Espero que me puedan ayudar con este problemilla:

Tengo dos archivos llamados..

index.html y un procesa.php

En el index.html tengo un formulario que a la hora de enviar los datos me sale una imagen "Cargando" mientras se ejecuta el procesa.php como tengo varias consultas....

pero quisiera que me redireccione al archivo que declare en el jquery, solo sale la imagen cargando y luego me deja en el mismo formulario.. en este caso quisiera que despues de cargar me lleve a "procesa.php" mostrandome todo los datos

PD: hice esto porque tengo varias consultas en el archivo procesa.php y se demora.. para eso puse un gif de cargando.. Simule el tiempo en el procesa

Este es mi codigo...

Index.html

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#form').submit(function(event) {
     var datos = $(this).serialize();   
      event.preventDefault()
      $.ajax(
        {
            url:'procesa.php',
            type:'POST',
            data:datos,
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        });
    });
});
</script>
</head>
<body>
<div id="formulario">
    <form id="form">
        <fieldset>
            <legend>Registrarse</legend>
            <div class="medidas">
                <label for="user">Usuario:</label>
                <input id="user" name="user">
            </div>
            <div class="medidas">
                <label for="pass">Contraseña:</label>
                <input type="password" id="pass" name="pass">
            </div>
        </fieldset>
        <div>
        <input type="submit" value="Enviar" />
        </div>
    </form>
</div>
<div id="carga" style="display:none">
    <img src="loading.gif" />
</div>

 
</body>
</html>

procesa.php

Código:

<?php
sleep(5);
/* LINEA DE CONSULTAS ... */
echo "USER RECIBIDO: ".$_POST['user'];

print_r($_POST);
?>

Alexis88 · #2 (**permalink**) 26/08/2014, 16:32

Si estás usando el método $.ajax, no puedes esperar a que se realice la redirección hacia el archivo destino pues el uso principal de una petición asíncrona es el de enviar y recoger datos consultando a un archivo en el lado del servidor sin la necesidad de recargar la ventana.

Para lo que buscas hacer, solo te basta con usar unas cuantas líneas de código:

Código Javascript:

Ver original$(document).ready(function() {
    $('#form').submit(function(event){
        var self = this;
        event.preventDefault();
        $('#carga').show("slow", function(){
            $(this).hide("slow", function(){
                self.submit();
            });
        });
    });
});

Con los métodos show y hide, muestras y ocultas al GIF, mientras que la función que le paso como segundo argumento a cada uno de estos métodos es el callback que se ejecutará al finalizar el método en cuestión. Finalmente, realizo el envío de los datos del formulario usando el método submit. Asigno el formulario a la variable self para que no ocurra un conflicto con el GIF al usar la palabra reservada this pues ya no aplicaría en el ámbito en el que realizo el envío de los datos.

Saludos

thedenis · #3 (**permalink**) 26/08/2014, 19:22

Cita:

Iniciado por Alexis88

Si estás usando el método $.ajax, no puedes esperar a que se realice la redirección hacia el archivo destino pues el uso principal de una petición asíncrona es el de enviar y recoger datos consultando a un archivo en el lado del servidor sin la necesidad de recargar la ventana.

Para lo que buscas hacer, solo te basta con usar unas cuantas líneas de código:

Código Javascript:

Ver original$(document).ready(function() {
    $('#form').submit(function(event){
        var self = this;
        event.preventDefault();
        $('#carga').show("slow", function(){
            $(this).hide("slow", function(){
                self.submit();
            });
        });
    });
});

Con los métodos [URL="http://api.jquery.com/show/"][inline]show[/inline][/URL] y [URL="http://api.jquery.com/hide/"][inline]hide[/inline][/URL], muestras y ocultas al GIF, mientras que la función que le paso como segundo argumento a cada uno de estos métodos es el callback que se ejecutará al finalizar el método en cuestión. Finalmente, realizo el envío de los datos del formulario usando el método [URL="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit"][inline]submit[/inline][/URL]. Asigno el formulario a la variable self para que no ocurra un conflicto con el GIF al usar la palabra reservada this pues ya no aplicaría en el ámbito en el que realizo el envío de los datos.

Saludos

Hola gracias por tu pronta respuesta..

Implemente tu codigo borrando el mio (asi era o te entendi mal?)

pero lo que buscaba es que a la hora de enviar los datos por un formulario este carga y quisiera que el tiempo que cargue salga el gif "cargando" hasta que el archivo php responda.. por eso simule con un sleep en el php.

Probe tu codigo pero se muestra el gif y desaparece en un instante.. y luego empieza a cargar la pagina los 5 segundos que estan en el php sin el gif..

Espero que me puedas ayudar
Saludos..

Alexis88 · #4 (**permalink**) 26/08/2014, 20:33

Si quieres que se realice una redirección y a la vez mostrar el GIF durante cinco segundos mientras carga la nueva página, puedes utilizar el método setTimeout implementado [U]en el archivo destino[/inline], no en el actual.

Código CSS:

Ver originalbody{
    display: none
}

Código Javascript:

Ver originalsetTimeout(function(){
    document.body.style.display = "block";
    document.getElementById("carga").style.display = "none";
}, 5000);

Para esto, el GIF tendrá que estar afuera del <body> o tampoco se lo verá. Podrías también colocar una capa opaca sobre el documento con el GIF en medio, pero ya es cuestión de gustos.

Saludos

thedenis · #5 (**permalink**) 26/08/2014, 20:52

Cita:

Iniciado por Alexis88

Si estás usando el método $.ajax, no puedes esperar a que se realice la redirección hacia el archivo destino pues el uso principal de una petición asíncrona es el de enviar y recoger datos consultando a un archivo en el lado del servidor sin la necesidad de recargar la ventana.

Para lo que buscas hacer, solo te basta con usar unas cuantas líneas de código:

Código Javascript:

Ver original$(document).ready(function() {
    $('#form').submit(function(event){
        var self = this;
        event.preventDefault();
        $('#carga').show("slow", function(){
            $(this).hide("slow", function(){
                self.submit();
            });
        });
    });
});

Con los métodos [URL="http://api.jquery.com/show/"][inline]show[/inline][/URL] y [URL="http://api.jquery.com/hide/"][inline]hide[/inline][/URL], muestras y ocultas al GIF, mientras que la función que le paso como segundo argumento a cada uno de estos métodos es el callback que se ejecutará al finalizar el método en cuestión. Finalmente, realizo el envío de los datos del formulario usando el método [URL="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit"][inline]submit[/inline][/URL]. Asigno el formulario a la variable self para que no ocurra un conflicto con el GIF al usar la palabra reservada this pues ya no aplicaría en el ámbito en el que realizo el envío de los datos.

Saludos

Hola gracias por responderme de nuevo amigo

Pero talvez te este confundiendo yo.. pero mira lo que yo quiero hacer es "que me muestre un gif mientras se tome el tiempo el servidor en procesar mi codigo que tengo dentro del php.. por eso simule 5 segundos ya que nose cuanto toma ahi veces toma mas tiempo" una vez que termine el proceso automaticamente me pase a la pantalla "procesa.php"

Espero que me puedas seguir ayudando

Saludos...

Alexis88 · #6 (**permalink**) 26/08/2014, 21:27

¿Pero quieres hacerlo con Ajax o prefieres una redirección 'tradicional'? Es decir, ¿que cargue toda la ventana, redirigiéndote hacia 'procesa.php'?

thedenis · #7 (**permalink**) 26/08/2014, 23:22

Cita:

Iniciado por Alexis88

¿Pero quieres hacerlo con Ajax o prefieres una redirección 'tradicional'? Es decir, ¿que cargue toda la ventana, redirigiéndote hacia 'procesa.php'?

Hola.,.

Lo quiero de cualquier forma ajax, javascript o php , contal que a la hora de enviar los datos atravez del formulario este cargue sin mostrar nada.. yo quisiera que al momento de presionar el boton muestre un mensajito o un gif "cargando espere..." cargue automaticamente dependiendo el tiempo que se tome el proceso no de forma manual poniendole un tiempo...

Ya sea php o ajax la idea es que no quede sin hacer nada mientras se demora la respuesta del servidor...

Mira te mando un link talvez me llegues a entender con esto ya que nose explicarlo muy bien .

http://www.forosdelweb.com/f127/enviar-peticion-mientras-mostrar-mensaje-869646/

Espero tu pronta respuesta.. Y disculpa por haberte quitado un poco de tu tiempo

Saludos...

Alexis88 · #8 (**permalink**) 27/08/2014, 00:15

Usando el método Ajax de jQuery, con lo que tienes hecho bastaría, con la salvedad de que el sleep en el archivo PHP estaría de más. El GIF se mostrará mientras no se reciba la respuesta a la petición asíncrona y se ocultará cuando esta se reciba. Lo único que te faltaría hacer es mostrar la respuesta de dicha petición en algún contenedor dentro del archivo desde el cual realizaste la petición, pero si deseas que se realice la redirección con la recarga de la ventana, la forma que te indiqué es la correcta, ya que no hay forma de saber exactamente cuánto tiempo tardará en cargar un script del lado del servidor.

Saludos