Apel AJAX în WordPress front-end
În plugin-ul meu folosesc două apeluri AJAX în backend care funcționează bine. Pentru a oferi aceeași funcționalitate în frontend, am încărcat o copie a acestor două funcții cu alte nume, iar codul meu este:
În fișierul principal al plugin-ului:
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']);
//afișează query-ul pentru debug
//echo "select eemail_id,eemail_content,eemail_subject from ".WP_eemail_TABLE." where 1=1 and eemail_status='YES' and eemail_id=".$_POST['id'];
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');
și în settings.js:
function showEntryfront(id)
{
jQuery(document).ready(function($) {
var data = {
action: 'my_action',
id: id
};
jQuery.post(ajaxurl, data, function(response) {
//alert('Am primit de la 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]);
});
});
}
iar pagina plugin-ului care declanșează acest showEntryfront() este:
<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
<option value="">Selectează subiectul email-ului</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>
A doua funcție face același lucru, doar că tabela din baza de date este diferită.
Consola Firebug îmi arată încă:
ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {
iar textarea nu se completează cu datele din tabela WP_eemail_Table. Vă rog să notați că această funcționalitate a mers în backend-ul wp-admin. Știu că apelul AJAX în admin se va încărca automat prin admin-ajax.php, dar cum pot implementa același lucru în frontend? Este vreo greșeală în codul meu?
Trebuie să localizați scriptul folosind funcția wp_localize_script
. În partea de administrare, ajaxurl
este deja disponibil. Dar în partea de front-end trebuie să localizați scriptul pentru a defini ajaxurl
.
Exemplu:
wp_enqueue_script( 'custom-ajax-request', '/path/to/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

Există de fapt o soluție integrată în nucleul WordPress pentru a folosi Ajax pe front-end!
WordPress are o bibliotecă JavaScript puțin cunoscută, dar foarte utilă, care poate fi accesată prin obiectul JS window.wp
, astfel:
// În JS:
var action = 'my_action';
var data = {id: 123};
var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
console.log('Ajax finalizat:', response);
});
// obiectul promise are și alte metode:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`
Avantajul este că acest obiect este întreținut și folosit de nucleul WordPress. Astfel, poți avea încredere că este la zi, funcțional și cel mai robust mod de a gestiona Ajax. De asemenea, reține că nu trebuie să te ocupi de chestiuni legate de jQuery...
Dacă nu ai obiectul JavaScript window.wp
pe front-end, atunci trebuie să te asiguri că adaugi wp-util
la dependințele scripturilor tale JS, astfel:
wp_register_script( 'your-handle', 'https://your-domain.com/path/to/file.js', [ 'wp-util' ] );
