Code / how to

Tags: ,

November 17, 2009 0

Ajax can really streamline a site’s user experience. The WordPress/WPMU back-end owes much of its ease of use to the presence of many dynamic menus and feedback notices. No one has had time to implement much of this for Buddypress, but I’m going to show you how to put use Ajax in your Buddypress plugins.

Its not too hard, but a big barrier to getting it to work is keeping all of the connections straight. When you have something of this nature wrong it is hard to debug.

Lets make a button that loads a hello world via ajax. Start with whatever input fields you need, and put a wp_nonce_field() underneath. Its a good idea to put all of this inside a form with an action, because you want people to be able to use your plugin even if they can’t run Javascript for some silly reason!

  1. <form action="somewhere.com/yeah" id="my-form">
  2.   <label for="username">Name: </label><input type="text" name="name"></input>
  3.   <label for="email">Email: </label><input type="text" name="email"></input>
  4.  
  5.   <?php wp_nonce_field( ‘save’, ‘_wpnonce-save’ ); ?>  
  6.   <input type="submit" name="save" id="save" value = "Add this member"/>
  7. <span class="ajax-loader"></span> //for fun, buddypress knows what this is
  8. </form>
  9.  

Enqueue a javacript file that has something like this:

  1. jQuery(document).ready(function(){
  2.        
  3.         jQuery(‘#my-form input#save’).click(function(){
  4.                 jQuery(‘.ajax-loader’).toggle();
  5.                
  6.                 //don’t let them click it a bunch of times in a row
  7.                 jQuery(‘#save’).attr({‘disabled’: true});
  8.                
  9.                 jQuery.post( ajaxurl, {
  10.                         action: ‘my_save’,
  11.                         ‘cookie’: encodeURIComponent(document.cookie),
  12.                         ‘_wpnonce’: jQuery("input#_wpnonce-save").val(),
  13.                         ‘username’: jQuery("input[name='username']").val(),
  14.                         ‘name’: jQuery("input[name='name']").val(),
  15.                 },
  16.                         function(response)
  17.                         {              
  18.                                 jQuery(‘.ajax-loader’).toggle();
  19.                                 jQuery(‘#save’).attr({‘disabled’: false});
  20.                                 jQuery(‘#my-form’).append(response);
  21.                         });
  22.                 });
  23.  });
  24.  

We’re doing jQuery here. Basically this hi-jacks the submit button and causes javascript to run instead of the usual post to the action page. Read up on jQuery if this code doesn’t make any sense.

But let me explain a few things about the jQuery.post(). action, _wpnonce and cookie are $_REQUEST variables that Buddypress understands – you must name these properties exactly as you see here. Additionally, their values must correspond to other values set in different places of the Ajax process. I’m going to communicate these necessary equalities in a series of rules. The first one is:

_wpnonce” in the javascript file = id of your nonce_field (the second parameter of wp_nonce_field)

Now its time to write our target php function.

  1. function my_save_function(){
  2.   check_ajax_referer(‘save’);
  3.  
  4.   echo "Sorry, I didn’t save anything";
  5. }
  6. add_action(‘wp_ajax_my_save’, ‘my_save_function’);
  7.  

Here’s the second rule:

Bind your target function to an action named after the “action” property in your Ajax Javascript, and remember to add “wp_ajax_” to the beginning

. . . And the third:

Use the first argument (the action) of your wp_nonce_field() on the Ajax initiating template/screen function as the argument for check_admin_referer()

check_ajax_referer is a security thing – you need to do this. At the end of all of this, the message should appear dynamically at the end of your form when you press the button. Keeping the equalities straight is key.

Leave a Reply