Enviar petición y mientras mostrar "mensaje"

neodani · #1 (**permalink**) 18/12/2010, 06:39

Buenas,

Tengo la pantalla ¿Olvidaste la contraseña? el usuario escribe su email y pulsa el botón enviar, se hacen varias operaciones en la base de datos y se envía un correo. Hasta que no finaliza todo ese proceso no carga la pantalla siguiente.

Se puede hacer que mientras el usuario espera a que acabe todo ese proceso mostrarle un mensaje animado como los típicos "loading..."?

Uso el framework jquery.

Muchas gracias de antemano

alfcm · #2 (**permalink**) 18/12/2010, 11:04

Te mando un ejemplo

Código Javascript:

Ver original$.ajax(
        {
            url:'http://localhost/pruebajax/public/orden/agregar',
            type:'POST',
            data:'id='+prod,
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        }
    );

en mi html tengo el div creado

Código HTML:

Ver original<div id="carga" style="display:none">
    <img src="http://localhost/pruebajax/public/img/cargando.gif" />
    </div>

En el beforeSend se muestra el div donde esta la imagen de loading y cuanco el proceso finaliza se da el complete y se oculta nuevamente el div que contiene a la imagen

Espero te ayude
Saludos

Saludos

neodani · #3 (**permalink**) 20/12/2010, 10:13

Cita:

Iniciado por alfcm

Te mando un ejemplo

Código Javascript:

Ver original$.ajax(
        {
            url:'http://localhost/pruebajax/public/orden/agregar',
            type:'POST',
            data:'id='+prod,
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        }
    );

en mi html tengo el div creado

Código HTML:

Ver original<div id="carga" style="display:none">
    <img src="http://localhost/pruebajax/public/img/cargando.gif" />
    </div>

En el beforeSend se muestra el div donde esta la imagen de loading y cuanco el proceso finaliza se da el complete y se oculta nuevamente el div que contiene a la imagen

Espero te ayude
Saludos

Saludos

Estoy usando tu ejemplo pero no consigo ver como envia los datos por ajax y mientras se recibe la respuesta muestra el cargando...

Mi fichero formulario.php

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
$.ajax(
        {
            url:'procesa.php',
            type:'POST',
            //data:'id='+prod,
            data:'user=5',
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        }
    );
</script>
</head>
<body>
<div id="formulario">
    <form method="post" action="procesa.php">
        <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>
            <div class="check">
                <input type="checkbox" id="remember" name="remember">
                <label for="recordar">Recordar mi nombre de usuario</label>
            </div>
        </fieldset>
        <div>
        <input type="submit" id="login" value="Ingresar">
        </div>
    </form>
</div>
<div id="carga" style="display:none">
    <img src="cargando.gif" />
</div>
</body>
</html>

procesa.php

Código PHP:

Ver original<?php
/* Recibe la respuesta del formulario
Hace lo tenga que hacer y devuelve una respuesta al formulario que puede ser 
Se ha creado una sesión.
*/
echo "ID RECIBIDO: ".$_POST['id'];
 
?>

Qué falta alfcm?

Muchas gracias

Dany_s · #4 (**permalink**) 20/12/2010, 11:01

es que si es mur rápido no te vas a dar cuenta, simula que el script php tarda unos segundos con sleep(5)

alfcm · #5 (**permalink**) 20/12/2010, 13:38

Exacto, ya que de seguro no es un proceso complejo el que ejecutas, por eso lo hace tan rapido que ni un segundo dura, usa el sleep() en PHP como dijo Dany_s, ademas veo que mandas como parametro "user" y en el PHP quieres recuperar con otro nombre de variable "id"

Saludos

neodani · #6 (**permalink**) 20/12/2010, 14:37

Cita:

Iniciado por alfcm

Exacto, ya que de seguro no es un proceso complejo el que ejecutas, por eso lo hace tan rapido que ni un segundo dura, usa el sleep() en PHP como dijo Dany_s, ademas veo que mandas como parametro "user" y en el PHP quieres recuperar con otro nombre de variable "id"

Saludos

He añadido el sleep en el script que procesa.php

Código PHP:

Ver original<?php
/* Recibe la respuesta del formulario
Hace lo tenga que hacer y devuelve una respuesta al formulario que puede ser 
Se ha creado una sesión.
*/
echo "USER RECIBIDO: ".$_POST['user'];
sleep(5);
?>

Ahora tarda en enviar los datos sin embargo no muestra la imagen.
Lo he probado tanto en Firefox como en IE pero nada

En la barra de debug del firebug me dice

$ is not defined
$.ajax(
linea 4

Me falta declarar algo antes?

Muchas gracias

alfcm · #7 (**permalink**) 20/12/2010, 14:42

no tienes incluido la libreria JQUERY, descargalo de internet y luego modificas el head de tu html, lo pones como primera linea esto:
<script src="tucarpetalibrerias/jquery.js" type="text/javascript"></script>

neodani · #8 (**permalink**) 20/12/2010, 15:42

Cita:

Iniciado por alfcm

no tienes incluido la libreria JQUERY, descargalo de internet y luego modificas el head de tu html, lo pones como primera linea esto:
<script src="tucarpetalibrerias/jquery.js" type="text/javascript"></script>

Cierto, no sé porque pensé que en este ejemplo no me hacia falta, error mio.

Ahora ya no dá ningún error de debug, y la petición veo a través del firebug que la envia y recibe, pero no hay manera de que salga la imagen

Este es el código.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
$.ajax(
        {
            url:'procesa.php',
            type:'POST',
            //data:'id='+prod,
            data:'user=5',
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        }
    );
</script>
</head>
<body>
<div id="formulario">
    <form method="post" action="procesa.php">
        <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>
            <div class="check">
                <input type="checkbox" id="remember" name="remember">
                <label for="recordar">Recordar mi nombre de usuario</label>
            </div>
        </fieldset>
        <div>
        <input type="submit" id="login" value="Ingresar">
        </div>
    </form>
</div>
<div id="carga" style="display:none">
    <img src="cargando.gif" />
</div>
</body>
</html>

Si quito la el display:none del la linea <div id="carga" style="display:none"> sí que se muestra la imagen, así que descarto un problema de ruta no?

Alguna otra idea?

Muchas gracias

alfcm · #9 (**permalink**) 20/12/2010, 15:46

si vas a procesar mediante ajax, entonces no uses SUBMIT usa BUTTON, son el Submit te vas directamente al servidor

<input type="button" id="login" value="Ingresar" />

yo uso lo mismo y me funciona a la perfeccion tal como te mande en un inicio el ejemplo

Saludos

Dany_s · #10 (**permalink**) 20/12/2010, 16:41

te falta el evento ready http://api.jquery.com/ready/

neodani · #11 (**permalink**) 20/12/2010, 16:51

Cambie el button como dijiste alfcm pero seguía sin funcionar
<input type="button" id="login" value="Ingresar" />

Cita:

Iniciado por Dany_s

te falta el evento ready http://api.jquery.com/ready/

Puse además el ready y ahora sí me aparece el gif cargando, pero me aparece nada mas entrar en la página.
Mi intención es que solo aparezca cuando el usuario hace clic en el botón enviar formulario y espera hasta que se procesa la respuesta.

Código Javascript:

Ver original$(document).ready(function() {
$.ajax(
    {
        url:'procesa.php',
        type:'POST',
        //data:'id='+prod,
        data:'user=5',
        beforeSend:function(objeto){ 
            $('#carga').css({display:'block'});
        },
        complete:function(){$('#carga').css('display','none');}
    });
});

Debo modificar la llamada en ajax para que solo se ejecute cuando se envia los datos del formulario?

Muchas gracias

Dany_s · #12 (**permalink**) 20/12/2010, 17:01

claro, tenes que interceptar el submit, no hagas con evento click en un boton porque al dar enter en un campo no va a funcionar

http://api.jquery.com/submit/

neodani · #13 (**permalink**) 20/12/2010, 17:29

Cita:

Iniciado por Dany_s

claro, tenes que interceptar el submit, no hagas con evento click en un boton porque al dar enter en un campo no va a funcionar

http://api.jquery.com/submit/

Cómo debería hacerlo? se puede meter de esta manera?

Código Javascript:

Ver original$(document).ready(function() {
    $('#form').submit(function() {
      $.ajax(
        {
            url:'procesa.php',
            type:'POST',
            //data:'id='+prod,
            data:'user=5',
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        });
    });
});

El id del formulario es #form y cambie de nuevo el submit por
<input type="submit" value="Enviar" />

Cuando pulso enviar me aparece la imagen pero enseguida desaparece.

Creo que no lo hago bien, puede ser?

Muchas gracias

Dany_s · #14 (**permalink**) 20/12/2010, 17:55

como está en el ejemplo de la doc, con un return false; al final para cancelar el comportamiento

Código Javascript:

Ver original$(document).ready(function() {
    $('#form').submit(function() {
      $.ajax(
        {
            url:'procesa.php',
            type:'POST',
            //data:'id='+prod,
            data:'user=5',
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        });
return false;
    });
});

Sourcegeek · #15 (**permalink**) 20/12/2010, 20:54

La forma correcta es usando preventDefault;

Código Javascript:

Ver original$(document).ready(function() {
    $('#form').submit(function(event) {
      event.preventDefault()
      $.ajax(
        {
            url:'procesa.php',
            type:'POST',
            //data:'id='+prod,
            data:'user=5',
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){$('#carga').css('display','none');}
        });
    });
});

Saludos!

neodani · #16 (**permalink**) 21/12/2010, 03:14

Muchas gracias, funcionó perfecto, utilice el ejemplo de Sourcegeek

Cuando se pulsa el botón enviar, me gustaría que se enviaran los datos del formulario, esto creo que lo he conseguido con el serialize();

Código Javascript:

Ver original$(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');}
        });
    });
});

Pero me gustaría que si envío los datos al script procesa.php y éste crea alguna sesion o algo, la página del formulario se entere, es la gracia del asunto... si todo lo que envío luego no hay forma de retornar la respuesta a la pagina origen no me sirve, y se debe poder incluso sesiones no?

Ahora mismo tengo lo siguiente

formulario

Código HTML:

Ver original<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 method="post" id="form" action="procesa.php">
        <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>
            <div class="check">
                <input type="checkbox" id="remember" name="remember">
                <label for="recordar">Recordar mi nombre de usuario</label>
            </div>
        </fieldset>
        <div>
        <input type="submit" value="Enviar" />
        </div>
    </form>
</div>
<div id="carga" style="display:none">
    <img src="cargando.gif" />
</div>
<?php 
if ($_SESSION["correcto"]){ 
    echo "SESION RECIBIDA"; 
}else{ 
    echo "NINGUNA RECIBIDA"; 
}
?>
 
</body>
</html>

procesa.php

Código PHP:

Ver original<?php
/* Recibe la respuesta del formulario
Hace lo tenga que hacer y devuelve una respuesta al formulario que puede ser 
Se ha creado una sesión.
*/
session_start(); 
print_r($_POST);
sleep(5);
if ($_POST['user']=='dani'){
    $_SESSION["correcto"] = true;
}
?>

Cómo puedo hacer para enviarle las sesiones que cree en el script remoto? porque tal y como está ahora la pag. del formulario no se entera, es como si para enterarse tuviera que recargar la página sino no se entera...

Muchas gracias

Dany_s · #17 (**permalink**) 21/12/2010, 07:35

Cita:

Iniciado por Sourcegeek

La forma correcta es usando preventDefault;
Saludos!

¿Correcta por?
preventDefault cancela el comportamiento y con return false cancela el comportamiento y el burbujeo

no hay nada incorrecto, de hecho en los ejemplos de jquery lo hacen con return false

Dany_s · #18 (**permalink**) 21/12/2010, 07:42

fijate en la doc la función de callback success le podés indicar un parámetro que es lo que te devuelve la la página, puede ser html, json, xml, etc

podes devolver un json y cuando recibis la respuesta usas esos datos

neodani · #19 (**permalink**) 21/12/2010, 08:38

Cita:

Iniciado por Dany_s

fijate en la doc la función de callback success le podés indicar un parámetro que es lo que te devuelve la la página, puede ser html, json, xml, etc

podes devolver un json y cuando recibis la respuesta usas esos datos

Sé que se puede devolver un json, pero ¿qué pasa con las variables de sesión? por mucho que este script (url:'procesa.php',) reciba los datos del formulario, ¿no puedo generar sesiones y luego consultarlas desde la pagina del formulario sin tener que recargar la página?

Muchas gracias

Dany_s · #20 (**permalink**) 21/12/2010, 09:12

si se puede, no lo probaste?

neodani · #21 (**permalink**) 21/12/2010, 11:16

Cita:

Iniciado por Dany_s

si se puede, no lo probaste?

A mi no me funciona Dany_s

Puedes mirar si el código que puse es correcto?
http://www.forosdelweb.com/f127/envi...6/#post3678846

La variable de sesión puede que se cree, pero cómo se entera la pagina del formulario que se ha creado, sin recargar la pagina, no se puede no?

Muchas gracias

alfcm · #22 (**permalink**) 21/12/2010, 11:42

Tu quieres comprobar solamente que se haya creado la variable session sin que recarge la pagina, bueno algo simple que me devolvera por defecto un string ya que solo es para comprobar, pero si quisiera un listado entonces en ese caso me convendria devolver un formato json

Agregando success

Código Javascript:

Ver original$(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'});
            },
            success:function(data){
                      alert(data);
             },
            complete:function(){$('#carga').css('display','none');}
        });
    });
});

y en tu php

Código PHP:

Ver originalif ($_POST['user']=='dani'){
    $_SESSION["correcto"] = 'BIENVENIDO';
}else{
   $_SESSION["correcto"] = 'SIN ACCESO';
}
 
echo $_SESSION["correcto"];

Saludos

neodani · #23 (**permalink**) 21/12/2010, 11:49

Cita:

Iniciado por alfcm

Tu quieres comprobar solamente que se haya creado la variable session sin que recarge la pagina, bueno algo simple que me devolvera por defecto un string ya que solo es para comprobar, pero si quisiera un listado entonces en ese caso me convendria devolver un formato json

Agregando success

Código Javascript:

Ver original$(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'});
            },
            success:function(data){
                      alert(data);
             },
            complete:function(){$('#carga').css('display','none');}
        });
    });
});

y en tu php

Código PHP:

Ver originalif ($_POST['user']=='dani'){
    $_SESSION["correcto"] = 'BIENVENIDO';
}else{
   $_SESSION["correcto"] = 'SIN ACCESO';
}
 
echo $_SESSION["correcto"];

Saludos

Pero a lo que voy es que si tienes que crear X variables de sesión, no está pensado ajax para crearlas, simplemente es para enviar/recibir datos en formato comúnmente en json... no?
Aunque a lo mejor si que las crea internamente, y cuando el usuario recarga las paginas posteriores podrá ver que las variables si que se crearon a través del formulario, verdad? esa es mi esperanza que probaré en breve...

alfcm · #24 (**permalink**) 21/12/2010, 11:57

Claro q se puede neodany, para que compruebes crea otra pagina tupagina.php y adentro escribe

<?php
session_start();
echo $_SESSION["correcto"];
?>

y veras que aun persiste la variable session

Saludos