How AJAX functions in WordPress
It is rather straightforward, but there is an extra layer in contrast to the way you would usually apply it.
|
1
|
wp-admin/admin-ajax.php |
The manner WordPress understands where to direct your AJAX call is through the’activity’ parameter your pass to the call.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$.ajax({ type:"POST",
url: ajaxurl,
data: {
action: "review_vote_ajax_request",
},
success:function(data){
alert(data);
},
error: function(errorThrown){
alert(errorThrown);
}
}); |
It is place there since this enables me to specify the variable globally utilizing a WordPress function via PHP.
|
1
2
3
|
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
</script> |
All this seems like when it echoes out is:
var ajaxurl = "my-website.com/wp-admin/admin-ajax.php"
|
So the AJAX phone gets sent /wp-admin/admin-ajax.php, then the right function gets called dependent on the’activity’ parameter which you pass via AJAX.
Since I envisage myself doing a few distinct AJAX calls in this specific subject, and because it is best practice no matter, I chose to place the PHP processing work to its own file called /inc/ajax.php. I then incorporate this to my functions.php file. I do so to keep all more organized, otherwise, just like the majority of WordPress stuff I see, my job ends up being a lot of practical spaghetti code!
Caution
One extremely ridiculous mistake I made here which isn’t associated with WordPress but to my own stupidity and fatigue whilst coding, was that I forgot to include my own ajax.php file in to my functions.php file. It took two hours of debugging before I realised what a nightmare!
The main reason I am adding this warning in this guide, is because it really forced me to find out a subtle nuance of’ WordPress’ AJAx implementation. The purpose basically did not exist, however, WordPress was coming’0′ into the AJAX call reply. This is why it took me as long to debug — it was not immediately evident that my purpose was not even included because it could be if that was not an AJAX call.
The server side
There are a number of things to look out for on your PHP function that requires the AJAX call.
Logged logged out
As a safety precaution, WordPress requires one to specifically create the AJAX function reachable to non-authenticated users.
|
1
|
add_action( 'wp_ajax_nopriv_review_vote_ajax_request', 'review_vote_ajax_request' );
|
Do not forget to substitute’_review_vote_ajax_request’ together with your function name.
In Addition, you Need to include the activity to specifically allow this for authenticated users:
|
1
|
add_action( 'wp_ajax_review_vote_ajax_request', 'review_vote_ajax_request' );
|
Kill the function
You Have to incorporate the following at the conclusion of your PHP AJAX work:
wp_die(); |
Echo not return
I am utilized to returning my own AJAX answers from the host in Laravael where I will’reunite’ the answer. However you need to echo out your answer back to AJAX, rather than returning it.
The final code
What is my javascript:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
jQuery(function($) {
$('body').on('click', '.review-helpful-answer', function(e) {
e.preventDefault();var $reviewId = $(this).attr('data-review-id');
var post_id = $(this).data('id');
$.ajax({type:"POST",
url: ajaxurl,data: {action: "review_vote_ajax_request",
post_id: post_id},success:function(data){
alert(data);},error: function(errorThrown){
alert(errorThrown);}});})}); |
Along with also the PHP function:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function review_vote_ajax_request() {
// do what you want with the variables passed through here$post_id = $_REQUEST['post_id'];
echo $post_id;
wp_die();}add_action( 'wp_ajax_nopriv_review_vote_ajax_request', 'review_vote_ajax_request' );
add_action( 'wp_ajax_review_vote_ajax_request', 'review_vote_ajax_request' );
|
