Hoy en AyudaWordPress.com |  |
| Posted: 31 Aug 2012 03:05 PM PDT  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:
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->ciudad."</div>"; foreach ($guias as $guia) { $html=$html."<a href='void(0);'>html','miventana');return false \">". $guia->tag."</a></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:
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. |
| You are subscribed to email updates from Ayuda WordPress To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
