The built in AJAX handler can seem a little fiddly at first. This is a short primer for reference.
This post assumes it is being done within a module.
The process flow is:
1. Javascript makes a callback to the server.
2. The server grabs the callback and runs it through the relevant function
3. The server processes any input and returns the correct output.
4. Javascript receives the returned data and acts on it.
Let’s assume that there’s html output of the following:
<a href=”#” onClick=”">Add a post</a>
<div id=”customPostList”>
</div>
When we click the ‘Add a Post’ link, we want to return a post title and add it into the div.
In the link’s onClick, add a function:
onClick=”addPostTitle(1)”
In the plugin’s javascript file, create the function:
function addPostTitle(postid) {
var data = {
action: “add_post_title”,
postid: postid,
};
jQuery.post(ajaxurl, data, function(response) {
});
}
In the above the function first builds an array. The function then passes a value (the Post ID), which is incorporated into the array, together with an action. This is the function that will be called on the server.
The second part of the function actually sends the data back to the server. This uses the native WordPress AJAX handler. The first variable, ajaxurl, is a native WordPress value, the second is our data array, and the third is an inline function that will deal with the response. We’ll come back to this.
In the plugins php file, we now need to perform step 2. The ‘action’ we named in our javascript file was ‘add_post_title’. In order to register this action as a WordPress AJAX event, the action needs to be prepended by ‘wp_ajax_’. So our action becomes:
“wp_ajax_” + “add_post_title”
wp_ajax_add_post_title
We can now register this in WordPress to execute our local php function, ‘do_add_post_title’:
add_action(‘wp_ajax_add_post_title’, ‘do_add_post_title’);
We can now build the php:
function do_add_post_title() {
$postid = intval($_POST['postid']);
$title = get_the_title($postid);
if (strlen($title > 0)) {
die($title);
} else {
die();
}
}
The key thing to remember here is to use the ‘die()’ function. The returned output can be sent via this function as well, though it can work well with print/echo.
So, that’s steps 1, 2, and 3. We’ve created a javascript trigger, associated the callback within WordPress, and built a php function to return some data.
For step 4, we return back to our javascript.
Within the post function, we need to handle our response. The first thing to do is check that we’re getting something returned. If we are, append the output to the div:
jQuery.post(ajaxurl, data, function(response) {
if (response.length > 0) {
jQuery(“#customPostList”).append(“<span>”+response+”</span>”);
}
});
The complete javascript should now look like this:
function addPostTitle(postid) {
var data = {
action: “add_post_title”,
postid: postid,
};
jQuery.post(ajaxurl, data, function(response) {
if (response.length > 0) {
jQuery(“#customPostList”).append(“<span>”+response+”</span>”);
}
});
}
So, when the link is clicked, the post ID (hardcoded in this example) is sent to the server to a specific action. The action executes a php function, which in turn processes the data and returns a response. This is then sent back to the browser and processed by our javascript function.
