Ajax permette di modificare i contenuti di una pagina anche una volta che la pagina stessa è stata caricata. Questo perchè PHP si occupa della generazione del codice HTML ma poi non permette più di modificarlo. Si ricorre quindi ad AJAX, o meglio a JS che chiama (quando decidiamo noi) una pagina PHP che rielabora del codice e lo ritorna al file JS nel formato JSON per poter appunto modificare i contenuti della pagina. Vediamo come funziona in WP.

Avremo quindi bisogno di due file, uno php e uno js.

Per la documentazione ufficiale: https://codex.wordpress.org/AJAX_in_Plugins

Nel nostro file js scriveremo

jQuery(document).ready(function($){
	$('#form_informazioni').submit(function(e){
		e.preventDefault();
  	    $.post(
			PT_Ajax.ajaxurl,
			{
				action : 'invia_mail',
				nextNonce : PT_Ajax.nextNonce
			},
			function( response ) {
				alert(response);
			}
		);
		return false;
	    });	
});

In pratica, diciamo che

• al submit di un form (#form_informazioni)
• si blocca il normale funzionamento (e.preventDefault(); // da verificare se serve per il form. Se avessimo cliccato un link non sarebbe cambiata pagina d esempio)
• viene chiamata un'azione (action : 'invia_mail')
• viene fatto un alert dei dati che ritornano da PHP (alert(response);)
• essendo un form ritorno falso per bloccare l'invio (return false;)

Ci serve poi il codice php. Nel nostro file functions.php scriveremo

<?
add_action( 'wp_enqueue_scripts', 'prepara_inserimento_scripts' );  
function prepara_inserimento_scripts() {
    wp_enqueue_script( 'invia_mail', get_template_directory_uri() . '/frontend/js/script_ajax.js', array( 'jquery' ));
    wp_localize_script( 'invia_mail', 'PT_Ajax', array(
        'ajaxurl'       => admin_url( 'admin-ajax.php' ),
        'nextNonce'     => wp_create_nonce( 'myajax-next-nonce' ))
    );
}
add_action( 'wp_ajax_invia_mail', 'invia_mail' );
add_action( 'wp_ajax_nopriv_invia_mail', 'invia_mail' );
function invia_mail() {
	// check nonce
	$nonce = $_POST['nextNonce']; 	
	if ( ! wp_verify_nonce( $nonce, 'myajax-next-nonce' ) )
		die ( 'Busted!');
	// generate the response
	$response = "messaggio di mail inviata";
	// response output
	echo $response;
	wp_die();
}
?>

In pratica gli diciamo

• dove si trova il file con li script, aggiungendo il js tra i file da caricare (il nome non deve per forza essere inerente all'azione invia_mail)
• aggiungiamo il nome dell'azione sia per gli utenti loggati che per quelli non loggati (e qui si il nome deve essere quello giusto!)

add_action( 'wp_ajax_XXXXXXX', 'XXXXXXXX' );
add_action( 'wp_ajax_nopriv_XXXXXXX', 'XXXXXXX' );

• la funzione che poi verrà chiamata (che corrisponde al nome della action nel file JS e al nome definito nelle due righe sopra)

In questo caso la funzione torna semplicemente una stringa, ma avrebbe potuto cercare dei post e tornare l'elenco dei dati come JSON (vediamo dopo un esempio). Alla fine fa un echo del risultato (stringa o JSON che sia) e muore (wp_die();)

Vediamo quindi un esempio che ritorna un file JSON

function genera_marker() {
	// check nonce
	$nonce = $_POST['nextNonce']; 	
	if ( ! wp_verify_nonce( $nonce, 'myajax-next-nonce' ) )
		die ( 'Busted!');
	$return_arr = array();
	// imposto la query
	$wpquery = new WP_Query(array(
		"post_type"  => "marker",
		"post_status" => "publish",
		"posts_per_page" => -1
	));
	while ($wpquery->have_posts()): $wpquery->the_post();
		$post_id = get_the_ID();
		$row_array['descrizione'] = get_post_meta( $post_id, 'descrizione_marker');
		$row_array['latitudine'] = get_post_meta( $post_id, 'latitudine_marker');
		$row_array['longitudine'] = get_post_meta( $post_id, 'longitudine_marker');
		if ( ($row_array['latitudine'] >0) && ($row_array['longitudine'] >0) ){
			array_push($return_arr,$row_array);
		}
	endwhile;
	echo json_encode($return_arr);
	wp_die();
}

e il file js che utilizza questo JSON

jQuery(document).ready(function($){
	var data = new Array();
	costruisci_mappa = false;
	$.post(
		PT_Ajax.ajaxurl,
		{
			action : 'genera_marker',
			nextNonce : PT_Ajax.nextNonce
		},
		function( response ) {
			data = response; 
			if (costruisci_mappa == false){
				costruisci_mappa = true;
				crea_mappa();
			}
		}
	);
	function crea_mappa() {
		json = JSON.parse(data);
		for(var i = 0; i < json.length; i++) {
			singolo_marker = json[i];
			latitudine = singolo_marker.latitudine;
			longitudine = singolo_marker.longitudine;
			descrizione = String(json[i]["descrizione"]);
		}
	}
});

In questo esempio, del cui codice è stata tenuta solo una piccola parte per mostrare l'estrazione dei dati dal JSON, i dati poi venivano utilizzati per generare dei pin su una mappa di google. Sarebbero però potuti essere utilizzati per aggiungere/modificare codice nella pagina generata, tramite jQuery.add o jQuery.append o jQuery.html

 

ESERCIZI

1. Creare un bottone in una pagina e un div vuoto (specidifarne l'id)
2. Creare una funzione php che estrae il custom post più recente
3. Creare quanto serve per far si che al clic sul bottone, venga fatta una chiamata AJAX che chiami quella funzione e che che popoli il div con le informazioni del post (anche solo titolo e testo)