Ventana de Diálogo jQuery – jQuery UI + Ajax

/, jQuery, PHP/Ventana de Diálogo jQuery – jQuery UI + Ajax

Hace ya algunas semanas, publiqué un pequeño ejemplo de como realizar una Ventana de Diálogo con jQuery y jQuery UI esta ventana incluye 3 botones, dos de estos abren un sitio web y el tercero la cierra.

Ahora bien, para este nuevo post, vamos a establecer una ventana de diálogo que presente tres opciones:

  1. Fecha y hora del servidor
  2. Versión php del servidor
  3. Cerrar

El código completo se puede descargar desde github

Video Tutorial

Para poder obtener esta información desde el servidor vamos a tener que indicarle a nuestros botones que ejecuten un script php con las siguientes funciones: date() y phpversion() que llamaremos por medio de la función load() de jQuery.

Es importante mencionar que jQuery ofrece 6 formas de realizar llamadas asíncronas: jQuery.load(), jQuery.get(), jQuery.post(), jQuery.getJSON(), jQuery.getScript() y jQuery.ajax().

En condiciones normales iriamos a un link que ejecutara estas funciones y en ese script deberíamos crear un link para volver a cargar la ventana de diálogo, aquí es donde se pone interesante la situación, lo que vamos a hacer es llamar a este script de forma asíncrona o mejor conocida como AJAX , lo que nos permitirá mantener nuestra ventana visible sin necesidad de re cargar la página.

Aquí presento un ejemplo sencillo, pero realmente se puede cargar cualquier tipo de información, lo que debemos tomar en cuenta es que no siempre será necesario utilizar AJAX en nuestros sitios, más que nada si son o no presentan interacción con bases de datos.

Creación de la ventana de diálogo

Para hacer nuestro ejemplo más entendible y ver lo que realmente nos interesa, crearemos una ventana de diálogo que se abra automáticamente, primero que nada hay que descargar jquery y jquery ui o cual se explica en Ventana de Diálogo con jQuery y jQuery UI , posterior a esto escribiremos el siguiente código, he llamado al archivo principal dialogoAjax.html.

Creación de código PHP

Ahora crearemos un archivo php al cual dirigiremos las llamadas asíncronas, lo llamaremos ajaxPhp.php

Resultados

Una vez que tenemos los archivos creados abrimos el archivo indexAjax.html y se cargara la ventana de diálogo automáticamente, posterior a esto hagamos clic en cada uno de los botones y veamos el resultado.
Como podrán ver es un ejemplo sencillo pero muy ilustrativo, sería una buena práctica intentar desarrollarlo con las otras 5 posibilidades de hacer llamadas AJAX que ofrece jQuery.

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

By | 2018-03-25T22:33:44+00:00 octubre 16th, 2011|Categories: Desarrollo Web, jQuery, PHP|Tags: , |5 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 +

5 Comments

  1. […] Acerca de « Ventana de Diálogo jQuery – jQuery UI + Ajax […]

  2. […] web deben ser muy parecidas a sus predecesoras 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 […]

  3. […] de funcionalidades de la mano de la función .ajax(); 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 […]

  4. @_Lazaro7 6 agosto, 2012 at 12:18 PM

    Excelente tutorial, lo acabo de terminar pero si a alguien le llega a pasar lo que a mi agregue está línea date_default_timezone_set('America/Mexico_City'); antes de obtener la fecha del servidor porque sin ella me salía ‘mal’ la hora.

    Gracias CazaresLuis, nuevamente excelentes tutoriales.

    • Luis Fernando Cázares 6 agosto, 2012 at 12:22 PM

      Hola muchas gracias por el comentario, lo tomaré en cuenta para nuevos post

      Saludos

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro