I recently had the need to perform some ajax functions on the backend of Texas Tech Today and wasn’t sure exactly how to go about it. So after a search, I found this great explanation: Simplified AJAX For WordPress Plugin Developers using Jquery. But it stops short of explaining how to receive some data from a POST, give it to PHP to do something with, and then return a result back to the form.
So, I thought I would detail how to do that in WordPress in a plugin.
The plugin just has a basic options page (Settings -> Ajax4WP) and lets you save an option to the database via ajax. Go ahead and download and install it; you’ll see how simple it is.
1. Create a php file that will have our javascript code, and save it into your plugins folder.
The reason we need our javascript code to be in a PHP file is to get the “get_option(’siteurl’)” value dynamically, since we’ll need that to reference our PHP file with the ajax function.
js-Ajax4WP.php (download the plugin files)
<?php
include('../../../wp-config.php');
$site_url = get_option('siteurl');
?>
jQuery(document).ready(function() {
//when the link with the id of save_settings is clicked, get the value of the text field and start doing the ajax stuff
jQuery('#save_settings').click(function() {
var Ajax4WP_test_setting = jQuery("#Ajax4WP_test_setting").val();
//action is the name of the php function in your main plugin file
jQuery.post("<?php echo $site_url; ?>/wp-admin/admin-ajax.php", {action:"Ajax4WP_save_settings", 'cookie': encodeURIComponent(document.cookie), Ajax4WP_test_setting:Ajax4WP_test_setting},
function(res)
{
var message_result = eval('(' + res + ')');
if (!message_result.success) {
jQuery("#Ajax4WP_test_setting").css("border","2px solid #cc0000");
}
alert(message_result.message + ' ' + message_result.setting);
});
return false;
});
});
This is jQuery ajax code that takes the value of a text field and passes it to Ajax4WP_save_settings() in our plugin file. We use jQuery.post to define a post variable (Ajax4WP_test_setting) that PHP can use.
Once the plugin code does its thing on the server (step 2 below), it returns the result back to this function at “function(res)”. Then we eval the json result and use an alert to display a message.
2. Create your standard plugin file and put in the Ajax4WP_save_settings function.
Ajax4WP.php (download the plugin files)
...
// our ajax action:
add_action('wp_ajax_Ajax4WP_save_settings', array(&$this, 'Ajax4WP_save_settings'), 10);
function Ajax4WP_save_settings()
{
$name = 'Ajax4WP_test_setting';
$value = $_POST['Ajax4WP_test_setting'];
if ($value == "") {
$message_result = array(
'setting' => "",
'message' => 'Please enter a Setting Value!',
'success' => FALSE
);
}
else {
update_option($name, $value);
$message_result = array(
'setting' => $value,
'message' => 'Saved! You entered:',
'success' => TRUE
);
}
echo json_encode($message_result);
exit;
}
...
This is standard PHP to process a POST request. When we’re through, we echo the json_encode() result. NOTE: json_encode is a PHP >= 5.2 only function, so be sure you are up to date on your PHP install.
3. Make a php file that will contain basic html and will get included on our settings page
Ajax4WP-settings.php (download the plugin files)
<div id="Ajax4WP Settings" class="inside" style="margin-left: 29px; width: 200px;">
<h3>Ajax4WP Settings</h3>
<div id="loading_message"></div>
<p>
<label for="Ajax4WP_test_setting">Setting Value:</label>
<br />
<input type="text" id="Ajax4WP_test_setting" name="Ajax4WP_test_setting" value="<?php if (isset($this->Ajax4WP_test_setting)) { echo $this->Ajax4WP_test_setting; } ?>" size="20" />
</p>
<p><a href="#" id="save_settings" class="button button-highlighted">Save Settings</a></p>
</div>
This is just a “stub” and gets included in our plugin. That way we don’t have a lot of html code mucking up the main plugin file. You can see what’s going on better in the source code when you download the files.
I hope that helps you out if you are wondering how to use jQuery and ajax in your WordPress plugins. Please leave a comment if you have any questions. Thanks!
I have read through the newest jQuery book out there: jQuery 1.3 With PHP from Packt Publishing by Kae Verans. It’s targeted at experienced PHP developers who want to enhance their applications on the front end with JavaScript and Ajax functionality and uses the jQuery library to do so. You do not necessarily need JavaScript or jQuery experience to follow along, although it helps. If you are a front end developer who already knows jQuery inside and out and are looking to learn more about PHP, this book is not really geared for you.
0 Comments
Welcome to my site! I live and work in the Dallas, Texas Metroplex area and my specialty is 
