Ajax con mensaje de carga en PHP usando las librerías jQuery4PHP

  • Por
  • PHP
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.
Vamos a continuar explicando cómo realizar Ajax desde aplicaciones PHP, usando jQuery, pero sin necesidad de conocer Javascript. Todo gracias a las librerías que venimos explicando en el Manual de jQuery4PHP. En capítulos anteriores aprendimos a hacer sencillos scripts con Ajax y ahora vamos a perfeccionarlos un poquito.

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.
Nota: Las funciones callback se pueden implementar en cualquier método jQuery y son funciones que se ejecutan siempre cuando la ejecución de ese método haya finalizado. Ver el Manual de jQuery para más explicaciones.

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.