Eseguire chiamate AJAX con jQuery e JSON in WordPress

Ajax and WordPress

Succede sempre più di frequente di dover effettuare delle chiamate ajax in WordPress. In questo articolo vedremo come effettuare delle chiamate asincrone senza dover creare nuove pagine WordPress ma sfruttando lo script utilizzato dall’interfaccia del wp-admin.
Nell’esempio in questione, la chiamata AJAX restituirà un file JSON formato davvero utile per rappresentare i dati restituiti da una query. Lato javascript useremo la funzione $.getJSON(…) di jQuery mentre lato server scriveremo il nostro script all’interno del file functions.php presente in qualsiasi tema WordPress.

Per prima cosa dobbiamo creare la corrispondenza tra una nuova action e la nostra funzione php:

add_action('wp_ajax_myaction', 'my_function');

Fatto ciò possiamo scrivere la nostra funzione my_function la quale corrisponderà all’azione myaction (il nome è puramente indicativo, potete chiamare l’azione e la funzione come preferite):

function my_function() {
  global $wpdb;
  $id = $_GET['id'];
  $rows = array();
  $q = "SELECT * FROM my_table WHERE id = ".$id;
  $rows['results'] = $wpdb->get_results($q, ARRAY_A);
  if(count($rows) <= 0){
    return false;
  }
  echo json_encode($rows);
  exit();
}

In questo script trovate tutto l’indispensabile per completare la parte lato server. Come si può intuire la query dovrà utilizzare un parametro passato in GET, poi utilizzando la variabile globale wpdb effettueremo la query sul database. La json_encode trasformerà l’array associativo con i record letti tramite la SELECT in una stringa JSON e la stamperemo a video tramite l’echo. Non dimenticate la exit() finale perchè altrimenti verrà stampato uno “0” che vi metterà in difficoltà nel parsificare il JSON.

Un ultimo particolare di cui tenere conto è che la add_action crea un’azione per l’admin-ajax.php che è un file accessibile solo da utenti loggati, quindi per consentire l’esecuzione dell’azione sia da utenti registrati sia da ospiti sarà necessario aggiungere un’ulteriore linea di codice come questa:

add_action('wp_ajax_nopriv_myaction', 'my_function');

Dopo aver completato lo script PHP possiamo passare al lato client, con il codice javascript per la chiamata della funzione:

$jQ.getJSON('<?php echo get_bloginfo('url'); ?>/wp-admin/admin-ajax.php',{action: 'myaction',id: 'tuo_id'}, function(json){...Codice javascript per parsificare il json...}

Ho omesso l’inclusione di jquery in WordPress, ma potete trovare come fare in un mio precedente articolo che trattava l’argomento nello specifico.

A questo punto non vi resta che sbizzarrirvi con le chiamate ajax nel vostro template oppure dai vostri plugin (in quest’ultimo caso basta spostare il codice PHP in un file del vostro plugin).

Includere jQuery nel proprio tema wordpress

Il titolo potrebbe farvi pensare che questo post potrebbe essere inutile… Infatti il metodo più semplice per usare jQuery in un tema per wordpress è quello di inserire una nuova sorgente per uno script javascript con il tag:

<script type="text/javascript" src="......./jquery.js"></script>

Inizialmente il tutto potrebbe anche funzionare e non è detto che possa filare tutto liscio senza crearvi nessun fastidio.

I problemi però potrebbero iniziare quando deciderete di includere un plugin nel vostro blog.

Infatti molti plugin di wordpress richiedono un framework javascript (non necessariamente jQuery) per funzionare. WordPress include già il file .js di jQuery e quando un plugin lo richiede, il sistema include già lo script.

Per questo il modo più semplice è sicuro di inserire jQuery nel proprio tema è quello di inserire nel file header.php sopra il richiamo della funzione wp_head():

wp_enqueue_script("jquery");
wp_head();

Ora wordpress includerà il file javascript di jQuery, ma bisogna ancora compiere un passo per poter essere sicuri di aver risolto tutti i problemi. Se fossero necessarie altre librerie javascript diverse da jQuery, quest’ultimo potrebbe andare in conflitto, perciò risolviamo il problema con queste istruzioni javascript:

var $jQ = jQuery.noConflict();

$jQ(document).ready(function(){
       alert("Hello World!");
});

Se avrete fatto tutto come si deve, al caricamento della pagina apparirà una finestra di avviso con scritto Hello World! ;-)

jQuery User Interface: interfacce utente in javascript!

Intanto benvenuti a tutti nel mio nuovo-vecchio blog. Ho solamente cambiato indirizzo, mantenendo tutto il vecchio blog e cambiando la veste grafica… Un piccolo aggiornamento contro la noia, insomma! ;-)

Detto ciò in per inaugurare davideferrero.com, voglio portarvi a conoscenza di un tool molto utile, se non lo conoscete ancora.

Come tutti ormai sapete (non lo sapete? sapevatelo :-P ) sono fan e infognato (leggi “addicted” che fa più figo) di jQuery, un javascript framework molto intuitivo, semplice e abbastanza leggero per animare e migliorare le proprio pagine web.

Bene, usando un po’ jQuery noterete subito di aver bisogno di interfacce grafiche per l’utente, ad esempio per una scelta di date (ne avevo già parlato qui) o per creare dei blocchi trascinabili (drag&drop), barre di caricamento, pulsanti “slider” o dei tabs… Ok, con jQuery UI tutto ciò è possibile, potete crearvi il vostro tema personalizzato scegliendo i colori e le caratteristiche dei vari oggetti e scaricarvi i file (javascript, css e immagini), personalizzandovi il pacchetto di download con solo gli oggetti di cui avete bisogno. Per tutte le personalizzazioni dei vari gadget, troverete un’ampia documentazione che vi aiuterà nel caso aveste problemi a farli funzionare.

Appena pubblicheremo il progetto a cui sto ancora lavorando in ufficio, potrete vedere all’opera alcune di queste UI… a presto per i prossimi aggiornamenti su questo argomento!

PS: aggiornate il feed rss facendolo puntare al nuovo indirizzo se non lo avete ancora fatto, ma soprattutto se vi eravate abbonati a quello vecchio… Se invece non lo avevate aggiunto tra i vostri preferiti, avete un motivo in più per farlo ora! ;-)
[ad#ad-1]

Un calendario con jquery!

Sono ormai diventato un jquery addicted e per ogni problema trovo una soluzione in questo fantastico framework javascript…

L’altro giorno sul lavoro dovevo realizzare una maschera di input con alcuni filtri su una ricerca… Uno di questi filtri era proprio una data di inizio e data di fine… Siccome la pagina (jsp) era rivolta ad impiegati di un ufficio(che non sempre sono good user) mi è stato chiesto di realizzare un calendario per permettere una scelta di date…

Ovviamente la prima cosa che ho fatto è stato googleggiare cercando “calendar jquery”… il primo risultato mi ha rimandato a questa pagina dove ho trovato in pochi e semplici passi alcuni file (un js e un css) da scaricare e da includere nel mio progetto(che comprendeva già jquery). E così che con 1 istruzione

$("#idtextbox").datepicker({"dd/mm/yy"});

ho risolto il mio problema..
Ecco a voi un semplice esempio (del tutto identico a quello che ho utilizzato io ;-):


[ad]

Librerie Jquery…for programmers only!

Librerie JQuery

Da qualche giorno sul lavoro ho dovuto realizzare un’applicazione in jsp che permettesse, al click su un link, di far comparire dei dati aggiuntivi… Appena ho sentito cosa dovevo fare, lo stack-trace della mia memoria era all’incirca questo:

AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX

Mi sono quindi sbattuto altamente… per cercare qualcosa che mi semplificasse il lavoro…:-P.

Dopo breve googleggiamento mi sono imbattuto in una libreria Javascript che dopo poco ho scoperto essere molto sciccosa… JQuery mette a disposizione infatti molti strumenti, sia per creare effetti grafici con javascript, sia per gestire gli eventi sui vari oggetti presenti nella pagina  e non ultimo di utilizzare AJAX in modo molto semplice…

Bè ora potete spassarvela con queste librerie… Ah dimenticavo, vengono utilizzate da Google, Dell e molti altri ancora, anche per questo credo che siano davvero un ottimo strumento…

Se le volete provarle, il link per scaricarle è questo:  http://docs.jquery.com/Downloading_jQuery

Se non avete idea di metterci le mani dentro, vi basterà scaricare il minified, dovrebbe essere la versione compressa che funziona allo stesso modo del .js… Buon lavoro![ad]