Como parte de los ejemplos de jQuery + jQuery UI he presentado recientemente en el post Ventana de Diálogo jQuery + jQuery UI + AJAX el llamado a un script php de forma asíncrona, para esto usamos la función .load() de jQuery la cual es muy sencilla de implementar, pero que pasa si queremos hacer algo más elaborado, por ejemplo que mientras se hace el llamado asíncrono a un script php, se bloqueen alguna sección de nuestra página, presentar un loader, inclusive modificar imágenes o textos de la misma?

Pues bien, en lo personal uso la función .ajax() la cual permite entre otras cosas indicar al llamado que se ejecute alguna acción antes de que sea exitosa la llamada a nuestro script php, determinar el tipo de datos, especificar el caché, entre otras varias opciones.

Lo que vamos a hacer es modificar el ejemplo Ventana de Diálogo jQuery + jQuery UI + AJAX sustituyendo la llamada con .load() por .ajax(), además de indicar se muestre un pre loader antes de entregar el resultado del script php.

Descargar código completo desde github

Video Tutorial

Crear un pre-loader

Hoy en día hay un sin fin de sitios que ofrecen la posibilidad de crear pre loaders, aquí una de ellas http://www.ajaxload.info/ .

Me saltaré la parte de la creación del ajax load para centrarnos más en la funcionalidad de este ejemplo.

Modificación de los archivos del ejemplo Ventana de Diálogo + jQuery + jQuery UI + AJAX

En el archivo dialogoAjax.html realizaremos reemplazamos la llamada .load() por .ajax()

En el archivo php ajaxPhp agregamos el número de segundos a esperar y la función php sleep(), esto para emular el retardo que se tiene en un servidor de producción y poder apreciar de forma clara lo que sucede cuando presionamos los botones y se realiza la llamada a nuestro script php.

Resultados

Ahora bien lo único que cambia es que al hacer clic en cada botón, antes de presentar el resultado de la petición asincrona a nuestro script php se muestra un ajax loader y se oculta de inmediato.