Ajax con WordPress y jQuery

Jquery y Ajax

jQuery es un entorno de trabajo que facilita mucho la programación cuando hacemos uso de javascript. Además jQuery no cuenta sólo con esa ventaja, pues además de lo anterior, permite utilizar ajax en las hojas html con contenido dinámico de una forma muy eficiente y facilitando enormemente la labor. La gran ventaja que se obtiene al implementar ajax en nuestras páginas web, es que no es necesario refrescar toda la página, cuando se hace una petición de datos al servidor, sino que sólo es actualizado la parte que cambia de la página, con lo que conseguimos un importante ahorro de recursos y de mejoras significativas en el rendimiento de nuestro sitio.

Con jQuery, existen diferentes formas de utilizar la tecnología ajax en nuestros documentos html, entre otras podemos comentar las siguientes:

  • $.ajax(opciones)
  • $.get(url,[,datos][,success][,dataType])
  • .load(url,[,data][,success])
  • $.post(url,[,datos][,success][,dataType])

Existen más fórmulas y procedimientos desarrollados por jQuery para aplicar ajax a nuestras páginas html, pero en todo caso nos vamos a centrar en la primera fórmula expuesta en el listado anterior, pues los comentarios que siguen sirven igual para el resto

Yo estaba acostumbrado a aplicar estas técnicas sin mayor problema, pero fuera de cualquier entorno cms, como es WordPress, y el problema me surgió cuando al intentar utilizar estos procedimientos dentro de mi sitio web http://www.vercrucerosbaratos.com/ y para mayor precisión en la página http://www.vercrucerosbaratos.com/guias-turisticas/, me generaba un error que no llegaba a entender su motivación, y en concreto el error que me desconcertaba estaba en que no encontraba la url que figura en la fórmula $.ajax(), a pesar de que el fichero de tipo php al que me refería estaba alojado en el servidor y el path estaba correcto, luego entonces por qué me fallaba. La explicación está en que yo hacía referencia a un fichero php que estaba fuera del entorno de trabajo de WordPress, es decir, no lo tenía recogido en la base de datos mysql con la que trabaja, y por eso no conseguía localizar el fichero.

Para ir centrando mejor el problema, lo mejor es conocer el funcionamiento normal de la función ajax $.ajax de jQuery, la cual se puede consultar en el siguiente enlace http://api.jquery.com/jQuery.ajax/, en el cual entre otras cosas se puede ver que su fórmula genérica es $.ajax( url [, settings] ). En un entorno sin uso de WordPress el url que hay que indicar, normalmente se corresponde con un fichero de tipo php en el lado del servidor que por ejemplo hace una consulta a la base de datos y devuelve una respuesta dirigida hacia al navegador. Este es el fichero que no encontraba mi hoja html. Veamos a continuación cómo solventé este problema, y la solución, como casi siempre pasa por incluir código en el fichero functions.php de nuestro theme, veamos cómo.

A continuación hago un copy-paste del código que finalmente he utilizado, en mi fichero de tipo .js,es decir de código javascript.

Como podéis ver, en la url que figura en la línea 3, ahora hacemos referencia a un fichero php que viene en la parte de administración de WordPress y que debe ser siempre el mismo. Debemos prestar especial atención en el apartado data que contiene un array con los parámetros ( en este caso de tipo POST que se pasan al servidor), pero hay uno que es esencial y que se denomina action (1) que en nuestro caso tiene un valor de “guias”, quedaros con este inciso, pues es muy importante para enlazar con lo que incluimos en el fichero functions.php y que comentaremos más adelante.

En el fichero functions.php del theme que estoy utilizando he puesto las siguintes instrucciones:

Se han numerado las líneas para una mejor comprensión y exposición. Hay que matizar que he utilizado la variable global $wpdb que define WordPress y que permite enlazar de una forma cómoda con la base de datos mysql. Como puede verse, el núcleo central de todo esto está en la función denominada guias(), que se encarga de entresacar de la base de datos la información que queremos y devolverla en la línea 9 a través de la instrucción echo. Pero ¿cómo enlazamos esta función con la petición que hemos hecho?. La clave está en la linea 12, en la que la función add_action tiene dos argumentos:

  • wp_ajax_guias : La parte inicial wp_ajax_ es fija, pero la final, en este caso “guias” debe concordar con el parámetro action al que nos hemos referido como muy importante en el párrafo anterior, y que hemos hecho una llamada de atención con (1).
  • El segundo argumento es el nombre de la función que se ha definido anteriormente, y que en nuestro caso la hemos denominado guias

Cuidado, es muy importante añadir la línea 10 que define la instrucción php die();

Bien ya tenemos casi todas las piezas del puzle montadas, hemos conseguido hacer la llama ajax al servidor, éste la ha procesado y ha generado la respuesta, lo único que nos queda es colocar esta respuesta en nuestra página web. El enlace de todo esto nos lo dan las líneas 5 y 7 del primer código que hemos colocado antes y que reproducimos de nuevo a continuación:

Que como bien puede comprenderse, lo que se dice es que si la respuesta del servidor es correcta, se añade al contenido de una etiqueta que tiene por id=”guias1″ el mensaje devuelto por el servidor.

Espero con este post resolver todas las dudas que se os puedan presentar en la aplicación de los enriquecedores métodos ajax que ofrece jQuery dentro de WordPress, pues la verdad que son unas herramientas muy interesantes.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (9 votos, promedio: 4,44 de 5)
Cargando…

Autor: Francisco

Desde hace ya muchos años me he convertido en un fanático del mundo de la programación. Inicialmente lo hice con Java, después lo extendí a su aplicación en el desarrollo de páginas web dinámicas (JSP, JSF, STRUTS, etc.) y lógicamente tampoco he perdido mi ligazón con el tan extendido uso de php que últimamente lo he enlazado con el mundo de los CMS y en concreto con WordPress, sobre todo por el hecho de facilitar enormemente la labor de programación y poder obtener unos resultados espectaculares. También me gustan los temas relacionados con la Ley de Protección de Datos, mis trabajos sobre esta materia los puedes ver en http://lopd-agpd.com

Comparte esta entrada en
468 ad

Pin It on Pinterest