Utilizzare Ajax in WordPress

Per la recente creazione di un gestionale ho utilizzato come piattaforma di base WordPress in sinergia con un nuovo framework CRUD chiamato XCRUD. In fase di sviluppo ad un certo punto ho avuto la necessità di implementare un interfaccia grafica che generasse dei box interattivi. Al trascinamento di un box all’interno di un altro box principale, l’azione avrebbe dovuto essere memorizzata al volo nel database MySql, per tenere traccia di quale box “figlio” era stato spostato in quale box “padre”. Sapendo di dover utilizzare Ajax ma non sapendo bene come utilizzarlo in WordPress mi sono documentato un pò in rete. Le guide trovate non sono state il massimo della chiarezza, con la conseguenza che alcune cose ho dovuto intuirle da me. Scrivo quindi questo articolo per guidarvi (e ricordarmi) il procedimento da seguire.


Spiegazione

Prima di tutto serve creare lo script js in cui verrà utilizzato Ajax, preferibilmente in una cartella adibita ai file javascript all’interno del tema (se non è presente createla voi). Un nome per questo esempio sarà “script1”. Fatto questo nel file functions.php del tema di WordPress (o in alternativa creare un plugin) aggiungere una action come mostrato nell’esempio riportato in basso.


function scriptToLoad() {
 wp_register_script( "script1", get_template_directory_uri() . '/js/graphmatch.js', array( 'jquery' ), '0.0.1', true);
 wp_localize_script( 'script1', 'myAjaxScript', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
 wp_enqueue_script( 'script1' );
}

add_action( 'wp_enqueue_scripts', 'scriptToLoad' );

Breve spiegazione di quanto scritto: Per integrare files javascript personalizzati in WordPress quest’ultimo necessita che ne venga specificato il caricamento tramite l’utilizzo dell’istruzione alla riga 7, in cui viene agganciata all’azione di caricamento degli script di WordPress (“wp_enqueue_scripts”) una funzione contenete le istruzioni necessarie per svolgere tale integrazione. Nella funzione (il cui nome è possibile scegliere liberamente) si devono specificare le istruzioni alla riga 2 e 4, necessarie per assegnare un alias allo script, la path in cui si trova, l’eventuale associazione con jQuery, la versione dello script e se esso dev’essere caricarto nell’header o nel footer della pagina. Per utilizzare Ajax all’interno dello script avremo bisogno di specificare una variabile globale contente la path al file di WordPress che si occupa di gestire appunto le chiamate Ajax, questo viene fatto con l’istruzione alla riga 3 del nostro esempio.

Una volta implementata questa richiesta procediamo con lo scrivere nello script la chiamata Ajax necessaria al nostro scopo. Qui di seguito quella che ho usato io riportata in maniera generica.


data = {
 action: "mg_graph",
 datatype: "seller",
 read: "true"
};

jQuery.post( myAjaxScript.ajaxurl, data ).done(function( resp ) {

 if(resp == 'error') {
  console.log('error');
 } else {
  resp = JSON.parse(resp);
  valueArray = resp;
 }

}).success(function() {

 jQuery.each(valueArray, function(key, value) {
  // codice..
 });

});

Dalla riga 1-5 dichiariamo un array contenente la nostra action di riferimento, ovvero il nome della funzione php che si occuperà di ricevere la richiesta Ajax e di interagire con il DB. Tale funzione sarà scritta sempre nel file functions.php del tema. Insieme alla action nell’array possiamo anche specificare eventuali variabili da passare a tale funzione. Dalla riga 7 comincia la richiesta Ajax: si utilizza il metodo post per la comunicazione con il server; tra parentesi specifichiamo come primo parametro la variabile globale creata precedentemente contenente la path al file admin-ajax.php (che come detto si occupa di gestire le interazioni esterne e interne tra WordPress e Ajax), e come secondo parametro l’array con la nostra action e le variabili da processare. La risposta di ritorno al termine della chiamata Ajax verrà tradotta con il comando “JSON.parse(resp)” alla riga 12.

Eccoci all’ultima fase, ovvero scrivere la funzione PHP richiamata nell’action e interpellata da Ajax. Qui di seguito una bozza generica di quella che è servita a me per realizzare quanto prefissatomi all’inizio dell’articolo.


function mg_graph() {

 global $wpdb;

 $datatype = $_POST['datatype'];
 $read = $_POST['read'];

 if($datatype == '****') {
  if($read == '****') {
   $values = $wpdb->get_results("SELECT * FROM * WHERE *", ARRAY_A);
   if($values) {
    echo json_encode($values); // Output della richiesta
   } else echo "error";
   exit(); // Obbligatorio!
  } else {
   echo "test";
   exit();
  }
 }
}

add_action( 'wp_ajax_mg_graph', 'mg_graph' );
add_action( 'wp_ajax_nopriv_mg_graph', 'mg_graph' );

In questa funzione PHP possiamo procedere a processare le variabili prendendole tramite $_POST (riga 5 e 6). Alla riga 3 dichiariamo la varibiale globale $wpdb per poter interrogare il DB di WordPress. Il risultato di tutte le operazioni viene codificato in formato json tramite il comando “json_encode()” alla riga 12. Alla riga 22 e 23 assegniamo la funzione mg_graph() all’azione di caricamento di tutte le chiamate Ajax da parte di WordPress.


Riferimenti documentazione
– https://codex.wordpress.org/Function_Reference/wp_localize_script
– http://wordpressista.com/usare-ajax-in-wordpress/
– https://codex.wordpress.org/AJAX_in_Plugins
– http://best5.it/post/come-utilizzare-ajax-in-wordpress-con-5-semplici-passi/
– http://www.dyn-web.com/tutorials/php-js/json/parse.php

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *