Ajax, Sack, Thickbox y WordPress

diciembre 4, 2010 Publicado en Software y Hardware
Etiquetas:

Mientras desarrollaba una solución para la página del programa Misión Futuro de la Universidad de Caldas, me encontré con la necesidad de usar Thickbox para visualizar una respuesta que debía obtener vía AJAX con la librería Sack, y de paso implementar el mecanismo del proceso de carga, –esa barra con rayas grises que se ve girar antes de abrir una ventana de Thickbox–.

El problema para lograr este objetivo es que la documentación de Thickbox y los ejemplos en su sitio hablan de cómo hacer el llamado AJAX empleando una URL, pero no hay ejemplos de cómo hacer el llamado empleando una función en Javascript, que es más o menos el reto particular al que me estaba enfrentando en esta oportunidad. La solución directa era simular el llamado con una URL en vez de usar las librería Sack que provee WordPress, pero implementar una solución de este tipo hace que perdamos las soluciones ofrecidas por WordPress que ya traen filtros para las variables y controles de seguridad. Obviamente simular el llamado con una URL no es una buena opción. ¿Qué hacer entonces? ¿Cómo seguir usando Sack y publicar la respuesta en una ventana de Thickbox?

Para el presente ejemplo voy a crear un llamado AJAX que retorne un eco al que se concatenará un mensaje de acuse de recibo.

El primer paso para implementar este ejemplo consiste en declarar la función que atenderá el llamado dentro de WordPress.

Los prefijos wp_ajax_wp_ajax_nopriv los califican como llamados AJAX, siendo nopriv el llamado cuando se hace sin haber iniciado una sesión. El resto de la primera variable corresponde al valor que recibirá la variable accion al hacer el llamado con la librería Sack, mientras que la segunda variable corresponde al nombre de la función que atenderá el evento.

El siguiente paso corresponde a la declaración de las funciones encargadas de actuar ante un llamado AJAX particular. Estas funciones no poseen variables de entrada porque deberán ser obtenidas vía POST o GET. En el caso particular que nos compete la función espera la variable texto que será concatenada al acuse de recibo. Las funciones que responden a un llamado AJAX deberán terminar con la función die para terminar el proceso en este punto y no desperdiciar recursos innecesariamente. Es importante hacer notar que el nombre de la función corresponde a la segunda variable de la declaración de la acción wp_ajax.

El otro elemento requerido en este proceso es la función en Javascript que hará el llamado AJAX. Es en esta función donde se hace el truco que permite publicar en una ventana de Thickbox la respuesta que se obtiene con la librería Sack. Lo primero a tener en cuenta es que los ejemplos que están en Thickbox no nos sirven porque no vamos a hacer un llamado a una URL directamente nosotros, así que debemos buscar la respuesta dentro de la API de Thickbox. Lo segundo es que es responsabilidad de nuestro código activar y desactivar la imagen de espera. Y tercero, la ventana Thickbox se debe abrir una vez tengamos una respuesta. Teniendo en cuenta estas características, el código que resulta es el siguiente.

La primera parte del código corresponde al proceso de activación de la imagen de espera. La segunda parte declara la instancia de Sack. La tercera declara la configuración de la variable Sack, que en este caso particular exportará los datos vía POST, usando la acción at_ajax (recomiendo mirar la declaración de las acciones para entender el objetivo de esta variable), además declaramos que la respuesta no necesita ser ejecutada (es posible retornar un script para ser ejecutado una vez concluya el envío) y la variable de referencia cuyo ID será at_respuesta (esta es la etiqueta en la que se escribirá la respuesta al concluir la transmisión en caso de no haberse declarado una función que atienda este evento). La última parte del código corresponde a las funciones que atenderán los eventos de error y de conclusión de la transmisión sin errores. Y he aquí el truco: asignar la respuesta, o el mensaje de error, al div que luego será llamado por la función tb_show con la que activaremos la ventana de Thickbox. La primera variable de la función tb_show corresponde al título de la ventana, la segunda corresponde a los parámetros de la misma, y la última variable corresponde al identificador del grupo de imágenes al que pertenece (null indica precisamente que no será asignado a grupo alguno).

Por último creamos el formulario donde estarán el div oculto en donde almacenaremos la respuesta al llamado AJAX, las entradas para las variables que necesitamos, y un botón (o un enlace) que ejecute la función en Javascript.

 

Poniendo todo esto junto el resultado es el siguiente

Para facilidad de estudio he creado un plugin sencillo con todo lo que he explicado acá para que lo pongan a prueba. El plugin buscará la etiqueta [ajax-test] para publicar el formulario de ejemplo.

Nota importante: Thickbox solo publicará contenidos que estén rodeados por etiquetas HTML. Por eso en el ejemplo el mensaje de error y la respuesta del llamado AJAX están rodeados por la etiqueta <p></p>.

Un comentario para “Ajax, Sack, Thickbox y WordPress”

  1. SLT-A77 dice:

    vale la pena leggere. L’ho trovato molto istruttivo, come ho fatto ricerche molto ultimamente sulle questioni pratiche, come si parla di …

Escriba su comentario