Simplified AJAX For WordPress Plugin Developers using Jquery

Posted on

I am assuming you know how to write a WordPress plugin, and now you are wondering how to use ajax to add that sexy feature that will make your plugin look a bit kool.

I faced the same problem, with my akWpUploder plugin. I googled but could not find anything interesting, or should I say, simple way of adding ajax to my plugin. So I dig into the WordPress code base for solution, as auto-saving feature of WordPress was one such thing that I wanted to use.

There I found what I was really looking for, a very simple way of using Ajax to get things done.

Problem: How to use WordPress functions in your plugin when using ajax

Are you satisfied with your knowledge? No, then spent 15 minutes every day on PHPCamp a knowledge-sharing website for our own PHP community

Let me explain the problem first, while I was working on my plugin I needed to insert the photo data into the database. To do this I needed to use WordPress database functions, but the way I knew to use ajax(i.e. creating a separate PHP file that handles the ajax request), it was bit difficult and messy. It would have involved either making a direct connection with the database or including the WordPress config file.

I was not happy with either of these options, I needed a simpler solution.

Solution: admin-ajax.php and action hook wp_ajax_

As I mentioned earlier I dig into WordPress to see the way WP uses ajax to save the posts.

What I found was this code.

      default :
	do_action( 'wp_ajax_' . $_POST['action'] );
 	die('0');

So, now all I needed to do was send all my ajax requests to admin-ajax.php to provide an ‘action’ and WordPress will call the function attached to that hook.

Neat, isn’t it? Now I can keep my plugin simple.

Implementation: an example

You might be thinking “It’s ok, but can you show me an example?”

Yeah, sure I will.

First we take care of javascript, here I am using Jquery, the easiest javascript library available.

  1. Let’s include jquery: 
    <?php
echo'<script src="'.get_option('siteurl'). '/wp-content/plugins/jquery-1.2.3.min.js"> </script>';
  2. Now the code for ajax request: there are two things to notice
    1. the ‘action‘, which contains the value to be used with ‘wp_ajax_‘ to make a WordPress hook.
    2. the other is ‘cookie‘ which contains the cookie required to authenticate your admin access to admin-ajax.php.
    <script>
 $.post(siteurl+"/wp-admin/admin-ajax.php", {action:"ak_attach", 'cookie': encodeURIComponent(document.cookie)},
 function(str)
{
      alert(str);
});

</script>

With this the javascript part of the things is over.

Now we will take care of handling this request in our plugin.

  1. So first we will create the function that will respond to ajax request. you should notice that i have used the exit at the end this is because i want the script to end here, other wise i will get ‘0’ with my data. 
    <?php
function ajaxResponse(){
global $wpdb; 	global $userdata;
get_currentuserinfo();
 echo "Hello ". $userdata->user_login;
 exit;
 }
  2. Now we need to tell wordpress about this function, so we will attach this function to the Hook that we created, by providing the action parameter in the javascript code above. 
     add_action('wp_ajax_ak_attach', 'ajaxResponse');
add_action( ‘wp_ajax_nopriv_ak_attach’, ‘ajaxResponse’ );//only used for non-loggedin scenario

That’s it we are done.

Now that you know how to use ajax easily while writing the your plugin, go ahead and use it. Download code for this demo plugin which shows the whole operation, and can act as template.

Note: admin-ajax.php only allows admin users to post the data, which means this can only be used on admin area of wordpress and not in the general scenario. For using ajax in other situations please check Using AJAX with your WordPress Plugin tutorial by Ronald.  With the latest version of WordPress, it is possible to use admin-ajax.php for all situations.

51 thoughts on “Simplified AJAX For WordPress Plugin Developers using Jquery”

  1. Pingback: Simplified AJAX For WordPress Plugin Developers using Jquery | White Sands Digital

  2. That is very cool. I had used a file in the plugin directory that linked back to and included the wp-config file. I will have to try this method when I get a chance.

  4. Pingback: Wordpress Tutorial « Welcome To My BLOG

  6. Pingback: Ryan Pharis - Lubbock, Texas Web Designer & Developer, WordPress Consultant » Blog Archive » Ajax for WordPress Plugins Using jQuery

  7. Pingback: The Ultimate Guide to Building a Wordpress Plugin - NETTUTS

  8. Pingback: Cotton Rohrscheib - Blog Archive » Building a Wordpress Plugin

  12. Pingback: » wordpress eklentisi oluşturma rehberi

  14. Pingback: WordPress Plugin Development Workshop at RMI - Recap | dropthedigibomb.com

  15. Pingback: WordPress Eklentisi Oluşturma Rehberi | Webmaster Arşivi | Script Download | Tema Download

  17. cool.

    I was wondering how I could hook into the wordpress, built-in DB functionality… had copped out with some direct DB calls (sloppy). good job digging into the wordpress core and figuring it out – and especially thanks for sharing:)

    ciao

  20. Pingback: skriv et plugin til wordpress - Ressourcer | 'Lær det via internet'

  22. Pingback: Essential Wordpress Plugin Development Resources, Tutorials and Guides : Speckyboy Design Magazine

  23. Pingback: PHP Quebec Presentation | dropthedigibomb.com

  27. Pingback: wordpress plugins

  28. You can use admin-ajax.php for no-admin actions, you just need to change the start of the hook from “wp_ajax_” to “wp_ajax_nopriv_”

  29. Nice article but I am looking to go to a page which has a dropdown box and when the user selects the race from the drop down box the results will be displayed below it. Any help on how to do this would be much appreciated

  30. Pingback: 酷宝 » Wordpress在插件中使用AJAX

  31. if you develop a plugin that relies on AJAX, what (if anything) do you do as a failsafe for people who have javascript disabled?

  32. Thanks for the explanation. Every time I search for that I keep coming back and though I forget everytime I directly remember how that Ajax-thingy works with wordpress.

    Good work. Thanks
    Stefan

  35. Hello, thanks for the post.

    I’ve got the demo version. I’m new to WP and ajax… I have some difficulty in understanding what the line add_action(‘edit_form_advanced’, ‘ajaxDemo’) does. Could you explain it a bit more?

    Thanks:)

  36. Hm… I see that add_action(‘edit_form_advanced’, ‘ajaxDemo’) adds a button at the bottom of the edit screen for any kind of post – WP post or a custom post type.

    I have a CD post type where I’d like to use ajax to add as much tracks to it as I want. Can I tire up the ajax only to a specific metabox? so it appears only in the CD posts when creating or editing CD info?

    Would really appreciate any help!

    Thanks,
    Dasha

  40. Pingback: How To Create a Plugin For Your Wordpress - Ntt.cc

  41. Pingback: Ajax to develope simple Plugin | Ebooks & Tricks

  42. Pingback: A Solution for Using Ajax in WordPress Admin | Zero Signal Productions

  43. Pingback: My Bookmarks « Ruman's Blog

  44. Thank you. You explained it very well and the plugin clarified it all. I was looking for a way to dynamically populate an HTML select box from the wpdb. After modification this will work great!

  45. Pingback: How to Create Google +1 WordPress Plugin - Wordpress Arena

  48. Pingback: Articles on writing WordPress Plugins | MakerBlock

  49. Pingback: Anhnm // Web designThe Ultimate Guide to Building a WordPress Plugin «

  50. Pingback: Designamight » Writing a WordPress Plugin – Part 1

  51. Hey,
    I have more than 1 echo statement in my ajax function. So the alert box is not showing up anything.(function(str){alert(str);}).
    How can i fix this issue

Comments are closed.