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.

 jQuery.ajax({
   type: "POST",
    url: "/wp-admin/admin-ajax.php", 
    data: {'action':'guias','ciudad':indice},
    success: function(msg){
    	/*alert(msg);*/
        $('#guias1').append(msg);
    },
    error: function(msg){
        console.log(msg.statusText);
    }
 });

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:

function guias(){
	global $wpdb;
	$ciudad=$wpdb->get_row($wpdb->prepare("select * from wp_ciudad where id='$_POST[ciudad]'"));
	$guias=$wpdb->get_results($wpdb->prepare("select * from wp_guia where ciudad_id='$_POST[ciudad]' "));
	$html= "<div class="puertos3"> <div class="puertos2">".$ciudad-&gt;ciudad."</div>";
	foreach ($guias as $guia) {
		$html=$html."<span class="removed_link" title="void(0);">html','miventana');return false \"&gt;". $guia-&gt;tag."</span></br>";
	}
	echo $html."</br></div>";
die();	
}
add_action('wp_ajax_guias', 'guias');
add_action('wp_ajax_nopriv_guias', 'guias');  

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:

    success: function(msg){
    	/*alert(msg);*/
        $('#guias1').append(msg);
    },

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 4.5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 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.

17 comentarios en “Ajax con WordPress y jQuery”

  1. Estaría muy bien tener un tutorial de como implemenatar la sección «comentarios» de un post con AJAX debido a que cada vez somos más los que utilizamos WordPress con algun tipo de sistema de caché, y evidentemente los comentarios nativos de WordPress son «cacheados» con el mismo tiempo de caducidad que la página a la que pertenecen.

  2. Gracias a tí Fernando, que mantienes con tu esfuerzo diario este maravilloso blog, que contiene una cantidad inmensa y enriquecedora de recursos para los que utilizamos WorPress, además útil para todos los niveles de conocimiento de este CMS .

    Mi felicitación más sincera por ello.

  3. Muy buena esta info muchas gracias… Una pregunta y si deseo que esa función se cargue dentro de un modal window y que además me muestre uno de esos circulitos de progreso mientras se carga, como que le haría?

  4. Hola como estan. Muy buena la informacion. Tengo un worpress que acaba de crear que solo se refresca en contenido del sitio pero no.se porque los plugins y otros archivos no me aparecen. Como slide. Tabs. Adsense. No se muestran.

  5. Entonces siempre que hagamos una llamada ajax hay que enlazarlo con admin-ajax.php?? Por ejemplo estoy añadiendo en un plugin un plupload y la llamada que hace el ajax en este complemento es así:
    url : » + $(«#id_usuario»).val(),
    El problema que tengo es que la página upload no forma parte de wordpress y aunque si me sube la imagen, no puedo aprovechar las funciones de wordpress. Así que que debería de hacer? pasar los datos por el admin-ajax.php o hacer que de alguna forma la página upload.php forme parte de wordpress y pueda recoger los datos del usuario para guardarlos junto con la imagen subida?
    Ya se que es una entrada vieja pero es de lo poco que he visto sobre el tema…..
    Un saludo

  6. Incapaz de utilizar un simple load(«file.php»). Como bien dice Francisco, WP se arma un lío y no encuentra el archivo o lanza otro. No quiero utilizar una nueva función, quiero utilizar simplemente esto. ¿Alguna ayuda?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido