You, me and even any other developer who have been working or had worked on plugins, always think on how one can add AJAX functionality to the plugin. The idea of using AJAX might even confuse often that what, how and when of plugin will do and perform if AJAX functionality got added. But, thinking on logical way and understanding the base concept, adding AJAX functionality to your plugin is not that much difficult although if you have been using and performing all the required tasks properly. To help you out over the topic, I am dividing this article into three parts – first on understanding what AJAX actually is, second how you can add AJAX functionality to your plugin and third discussing some tips on how to make AJAX addition in proper way as it have to be.
Part 1: Understanding AJAX
AJAX, dubbed as Asynchronous JavaScript and XML is a technology which allows a page to perform actions or updates dynamically without showing or representing any need of reloading it. Using AJAX technology means you are making your web site more responsive and interactive in nature as compared to those of non-AJAX site.
To have AJAX technology on board, the web programmer or developer connects a user interface element like a link, button or some other type on the web page to a JavaScript program. Once the user activates the interface, the JavaScript program sends data request to a web server URL from where the request made.
Next, a web server program processes the request and sends back the requested data, which is typically in XML format. On receiving the data in the browser, the JavaScript program will receive an “asynchronous” notification, which once processed can be displayed in an appropriate manner. AJAX plays an important role in the world of today’s most visual web browsers. The result of only such responsiveness in AJAX nature, the technology has been adopted by all sorts of web sites, including WordPress.
Part 2: Adding AJAX Functionality To The Plugin
#1 On The Administration Side
As AJAX already comes as built-in core WordPress screens, adding more glimpses to it is not much a difficult task. You can do this by adding some JavaScript which will trigger the AJAX request in the following manner:
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 27 28 29 30 31 32 33 34 35 |
<?php add_action( 'admin_footer', 'my_action_javascript' ); function my_action_javascript() { ?> <script type="text/javascript" > jQuery(document).ready(function($) { var data = { action: 'my_action', whatever: 1234 }; // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php $.post(ajaxurl, data, function(response) { alert('Got this from the server: ' + response); }); }); </script> <?php } |
Once done, all you need to do is to set up a PHP function which will handle the request.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php add_action('wp_ajax_my_action', 'my_action_callback'); function my_action_callback() { global $wpdb; // this is how you get access to the database $whatever = intval( $_POST['whatever'] ); $whatever += 10; echo $whatever; die(); // this is required to return a proper result } |
Source: WordPress Codex
Although this completes your task here, but make sure you do add the required extra miles to it i.e. error checking and verifying that the request comes from the right place or not.
#2 Different JavaScript File
The same snippet work here as that of the previous one we used, but you need to have JavaScript on a separate external file which will call js/my_query.js while the handler function will remain same as that of last example (above).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(document).ready(function($) { var data = { action: 'my_action', whatever: ajax_object.we_value // We pass php values differently! }; // We can also pass the url value separately from ajaxurl for front end AJAX implementations jQuery.post(ajax_object.ajax_url, data, function(response) { alert('Got this from the server: ' + response); }); }); |
#3 On The Viewer-Facing Side
From WordPress 2.8 and further version, you will find a hook similar to wp_ajax_(action) and wp_ajax_nopriv_(action) executes for users that are not logged in. If you want to execute on the front-end for both visitors and logged-in users, just add up the following snippet.
|
|
add_action('wp_ajax_my_action', 'my_action_callback'); add_action('wp_ajax_nopriv_my_action', 'my_action_callback'); |
Part 3: Tips On How To Make AJAX Addition In A Right Way
#1 Using wp_localize_script()
While you have seen using the function wp_localize_script() for localization purpose, you can use the same for declaring JavaScript variables with namespace to use with your script.
|
|
wp_localize_script( $handle, $namespace, $variable_array ); |
Source: garyc40 via GitHub
#2 Using admin-ajax.php for handling AJAX requests
All the AJAX requests directed towards the wp-admin/admin-ajax.php. And, for which a parameter called action is required to send it to admin-ajax. The parameter will fire one of the hooks when admin-ajax processes the request.
|
|
// this hook is fired if the current viewer is not logged in do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] ); // if logged in: do_action( 'wp_ajax_' . $_POST['action'] ); |
Source: garyc40 via GitHub
#3 Use The built-in jQuery Form Plugin
You usually use AJAX to avoid reloading the page when submitting forms while you might be missing on learning the fact that WordPress also offers a jQuery plugin to handle AJAX form submission.
|
|
<script src="https://gist.github.com/3827608.js"> </script> |
Source: garyc40 via GitHub
Photo Credit: Flickr/Rexness
Note: If you like the post, make sure you do share your views via the comments below and also like and follow JustWP.org on Facebook and Twitter.
