Chiamata Ajax nel frontend di WordPress
Nel mio plugin sto usando due chiamate ajax nel backend che funzionano correttamente. Per fornire la stessa funzionalità nel frontend ho caricato una copia di queste due funzioni con nomi diversi e il mio codice è:
Nel file principale del plugin:
function my_action_callback(){
global $wpdb;
if (@$_POST['id']) {
$daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
//Seleziona eemail_id,eemail_content,eemail_subject dalla tabella WP_eemail_TABLE dove status='YES' e id corrisponde
if (!empty($daty)) {
foreach ($dat as $datt) {
echo $datt->eemail_content . "_" . $datt->eemail_subject;
die();
}
}
}
}
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
E nel mio settings.js:
function showEntryfront(id)
{
jQuery(document).ready(function($) {
var data = {
action: 'my_action',
id: id
};
jQuery.post(ajaxurl, data, function(response) {
//Ricevuto dal server: ' + response
var n=response.split("_");
jQuery('textarea#mail_contents').text(n[0]);
$('#mail_subject').val(n[1]);
// jQuery('textbox#mail_subject').text(n[1]);
});
});
}
E la pagina del plugin che attiva questa showEntryfront() è:
<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
<option value="">Seleziona oggetto email</option>
<?php echo $eemail_subject_drop_val; ?>
</select>
<input type="hidden" name="send" value="" id="send" /> </td>
<tr height="60px;"> <td>
<textarea name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>
</td></tr>
La seconda funzione fa la stessa cosa, solo la tabella del database è diversa.
La console di Firebug mostra ancora:
ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {
E la textarea non viene popolata con i dati dalla tabella WP_eemail_Table. Si noti che questa funzionalità funzionava nel backend di wp-admin. So che la chiamata ajax in admin viene caricata automaticamente da admin-ajax.php, ma come posso implementare lo stesso nel frontend? C'è qualche errore nel mio codice?
Devi localizzare lo script utilizzando la funzione wp_localize_script
. Nell'area di amministrazione, ajaxurl
è già disponibile. Ma nel front-end devi localizzare lo script per definire ajaxurl
.
Esempio:
wp_enqueue_script( 'custom-ajax-request', '/percorso/di/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

In realtà, esiste una soluzione integrata nel core di WordPress per utilizzare Ajax sul front end!
WordPress ha una libreria JavaScript poco conosciuta ma molto utile che può essere accessibile tramite l'oggetto JS window.wp
, in questo modo:
// In JS:
var action = 'my_action';
var data = {id: 123};
var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
console.log('Ajax fatto:', response);
});
// l'oggetto promise ha anche altri metodi:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`
Il vantaggio è che questo oggetto è mantenuto e utilizzato dal core di WordPress. Quindi puoi essere sicuro che sia aggiornato, funzionante e il modo più robusto per gestire le tue richieste Ajax. Inoltre, nota che non è necessario gestire le dipendenze jQuery...
Se non hai l'oggetto JavaScript window.wp
nel front-end, allora devi assicurarti di aggiungere wp-util
alle dipendenze dei tuoi script JS, in questo modo:
wp_register_script( 'your-handle', 'https://your-domain.com/path/to/file.js', [ 'wp-util' ] );
