Usando jQuery.ajax (Ventana de Diálogo + Pre-Loader)

/, jQuery, PHP/Usando jQuery.ajax (Ventana de Diálogo + Pre-Loader)

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.

By | 2018-03-25T22:33:44+00:00 octubre 17th, 2011|Categories: Desarrollo Web, jQuery, PHP|Tags: , |19 Comments
Desarrollador web front y back end, php, mysql, css3, html5, twitter bootstrap, jquery . . . twitero, bloguero, consultor de IT y padre de dos hermosos bodoques. Visita mi Perfil en Google +

19 Comments

  1. […] agregaremos un pre-loader, este lo vimos en Ventana de Diálogo jQuery + jQuery UI + AJAX y  Usando jQuery.ajax (Ventana de Diálogo + Pre-Loader) y haremos que al momento de iniciar el envío del formulario se oculte el botón Continuar. […]

  2. Carlos 2 octubre, 2012 at 1:39 PM

    Gracias por el tutorial. Lo he seguido, sin embargo el beforeSend y el response no acaban de funcionar en mi código. ¿Puede ser por la versión Jquery?

    Gracias

    • Luis Fernando Cázares Bulbarela 2 octubre, 2012 at 1:44 PM

      Hola Carlos buenas tardes, muchas gracias por tu amable comentario, en cuanto a lo del funcionamiento puede ser lo que comentas o en su defecto alguna cuestion de sintaxis, ya ves que javascript por una coma o letra mal escrita deja de funcionar, te invito a que descargues el código del repositorio de GitHub y pruebes de nuevo.

      Saludos

  3. carlos 6 octubre, 2012 at 11:36 AM

    Hola Luis Fernando. He probado el código de la descarga y funciona correctamente. Gracias.
    Me queda la duda, sin embargo, del response. Por ejemplo, si variamos el código con un formulario en la ventana modal, ¿Cómo se decide cuándo debe aparecer el response y no el formulario. Ej:

    RESPONSE

    Titulo

    Alt

    Descripcion

  4. carlos 6 octubre, 2012 at 11:37 AM

    Perdón, utilice la etiqueta código y ha dado error:

    RESPONSE

    Titulo

    Alt

    Descripcion

    • Luis Fernando Cázares Bulbarela 6 octubre, 2012 at 3:54 PM

      Hola Carlos buenas tardes, muchas gracias por seguir mis tutoriales, no comprendo muy bien la pregunta, no se si te funcione ver este tutorial

      Saludos

  5. […] versiones de escritorio, ya vimos como crear Ventana de Diálogo jQuery – jQuery UI + Ajax y Usando jQuery.ajax (Ventana de Diálogo + Pre-Loader) , ahora vamos a implementar un formulario entro de una ventana de diálogo usando los mismos […]

  6. oscar 24 agosto, 2013 at 9:36 PM

    CABRÓN NO HAGAS CHINGADERAS ESTO ES UNA PUTA MIERDA MEJOR DIME COMO HACER UN PRELOADER AJAX REAL CON ESTE PLUGIN jpreloader

    • Luis Fernando Cázares Bulbarela 26 agosto, 2013 at 7:00 PM

      Hola Oscar, este tutorial es de desarrollo web y preloaders para interacción con bases de datos, he investigado sobre jpreloader y veo que es un plugin para pre cargar imágenes y no para mostrar cuando se esta esperando respuesta de un servidor por medio de AJAX.

      Espero pronto encuentres lo que necesitas.

      Saludos

  7. Saul 8 septiembre, 2013 at 1:06 PM

    Te felicito por estos tutoriales que son de gran ayuda, espero sigas compartiendo de tu conocimiento y estes actualizando tu blog!!

    • Luis Fernando Cázares Bulbarela 8 septiembre, 2013 at 1:21 PM

      Gracias Saul, estoy trabajando en eso, te invito a registrarte en mi nuevo newsletter, te llegarán los avisos de mis nuevos tutoriales y mas…

      Saludos

  8. Santiago 16 marzo, 2014 at 8:30 PM

    Hola Luís, muchas gracias por tu aporte, pero me podrías decir como instalo un loader a mi sitio web en la parte de: http://www.sancarroch.login.php o sea quiero hacerlo parecido a gmail no sé si tú tienes algún correo con ellos que cuando tú haces login aparece un loading y después automáticamente cuando se ha cargado el loader te tira a la bandeja de correos… ayúdame por favor!!

    • Luis Fernando Cázares Bulbarela 17 marzo, 2014 at 4:55 PM

      Hola buenas tardes Santiago, pues debe ser sencillo, creas un script que cuando inicies solo muestre el div que contiene la barra o el loader y con ajax cargas la información, cuando se complete el ajax ocultas y muestras el resultado.

      Saludos

  9. Santiago 17 marzo, 2014 at 10:58 PM

    Tienes de casualidad algún código para yo implementarlo y darme los pasos en qué parte lo pondría ya que me he quedado en las nubes… te agradecería que hicieras el favor de pasarme el código y darme los pasos… gracias!

    • Luis Fernando Cázares Bulbarela 17 marzo, 2014 at 11:09 PM

      Buenas noches Santiago, no cuento con el código para este tipo de funcionalidad, lo que te puedo ofrecer es que intentes desarrollarlo y si te atoras te puedo ir dirigiendo.

      Saludos

  10. Santiago 18 marzo, 2014 at 2:26 AM

    En donde me anoto?

  11. Santiago 18 marzo, 2014 at 8:41 AM

    Sí, tú me dijiste: “…intentes desarrollarlo y si te atoras te puedo ir dirigiendo.” por éso pregunto!

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro