Cómo hacer un mensaje de cargando, que se muestra al iniciar la solicitud Ajax y se oculta una vez que se ha mostrado la respuesta a esa solicitud, con PHP y jQuery, usando jQuery4PHP.
Cuando estamos haciendo páginas que usan Ajax, más tarde o más temprano vamos a querer hacer un efecto como el que vamos a ver en este artículo. Se trata de hacer un mensaje de aviso de carga de datos, que se muestre cuando se inicia la solicitud Ajax y se oculte cuando se haya recibido ya la respuesta.
Los mensajes de carga son típicos en las aplicaciones Ajax y estoy seguro que el lector los conoce. No obstante, se puede ver en una página aparte el resultado de lo que vamos a construir.
En este caso vamos a utilizar tres elementos de HTML, un botón para iniciar el proceso, una capa donde mostrar el resultado de la solicitud Ajax y otra capa con el mensaje de carga.
<button id="miboton">Carga con Ajax!!</button>
<div id="micapa"></div>
<div id="capacargando">Cargando...</div>
La capa con el mensaje de carga está inicialmente oculta por medio de CSS.
#capacargando {
display: none;
}
El script PHP que vamos a realizar será más complejo que en otros ejemplos anteriores, ya que cuando se pulse el botón tendremos que hacer varias cosas, como iniciar la solicitud Ajax y mostrar el mensaje de carga.
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
//muestro el mensaje de carga
YsJQuery::css()
->in("#capacargando")
->propertyName("display")
->value("block")
,
//borro cualquier cosa que haya en la capa donde mostrar el resultado
YsJQuery::html("")
->in("#micapa")
,
//inicio la solicitud ajax
YsJQuery::load(
"contenido-ajax-retardo.php"
)
->in("#micapa")
//cuando acabe la solicitud, oculto el mensaje de carga
->callback(
new YsJsFunction(
YsJQuery::css()
->in("#capacargando")
->propertyName("display")
->value("none")
)
)
)
Hemos comentado el código para que se entiendan los pasos que se han realizado cada vez que se pulsa el botón. No obstante, es interesante que se perciban varias cosas adicionales.
- Si quieres realizar varias cosas dentro de un execute(), como ese que tenemos al principio del código, tienes que separarlas por comas ",". Hazte a la idea que las sentencias a ejecutar con un execute() son parámetros del método execute().
- Sabemos cuándo ha terminado una solicitud Ajax haciendo una función callback() en el método load(), que se ejecutará cuando se hayan recibido los datos.
El código fuente completo de este ejercicio se puede ver a continuación:
<?php
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando jQuery 4 PHP</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css" media="all">
#micapa{
font-size: 14px;
font-family: verdana;
}
#capacargando {
display: none;
}
</style>
</head>
<body>
<h1>Probando el ajax de jQuery4PHP</h1>
<button id="miboton">Carga con Ajax!!</button>
<div id="micapa"></div>
<div id="capacargando">Cargando...</div>
<?php
echo
YsJQuery::newInstance()
->onClick()
->in("#miboton")
->execute(
//muestro el mensaje de carga
YsJQuery::css()
->in("#capacargando")
->propertyName("display")
->value("block")
,
//borro cualquier cosa que haya en la capa donde mostrar el resultado
YsJQuery::html("")
->in("#micapa")
,
//inicio la solicitud ajax
YsJQuery::load(
"contenido-ajax-retardo.php"
)
->in("#micapa")
//cuando acabe la solicitud, oculto el mensaje de carga
->callback(
new YsJsFunction(
YsJQuery::css()
->in("#capacargando")
->propertyName("display")
->value("none")
)
)
)
?>
</body>
</html>
Ahora podemos ver el código fuente de contenido-ajax-retardo.php, que es la página que solicitamos con Ajax. Realmente no tiene nada que no sepamos, pero queremos mostrar que le hemos puesto una llamada a la función sleep() para producir un retardo de 3 segundos en la respuesta.
<?php
sleep(3);
echo utf8_encode("Esta respuesta tardó 3 segundos en producirse");
?>
Eso es todo y se puede ver en funcionamiento en una página aparte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...