Add Ajax to Expertise Plugin

Add Ajax to Expertise Plugin

The Expertise plugin is nearing completion now. We still need to give experts a method to sign up as experts for the 3DN expertise areas (or to sign out should they no longer want to act as expert). We will be using some Wordpress specific Ajax constructs for this.

One of the reasons we would like users to sign up and be logged in when they look at the expertise pages is so we can see right away if somebody who’s visiting the pages is an expert himself or not. This way we can decide what button to show and what action to attach to the button. We have two different buttons to choose from:

These are opt-in / opt-out buttons where a visitor can indicate whether he is or isn’t an expert on the expertise being viewed.

These buttons have a simple onclick javascript that gets executed when the user clicks on them; when the opt-in button is clicked a simple thickbox dialog asking for the user’s expertise level is displayed while the opt-out button simply shows an ‘are you sure’ question. In this article I’ll assume the reader is familiar with thicbox and how to pop-up a dialog.

Using SACK

SACK is the Simple Ajax Code Kit. We don’t want clicking the button on the popup dialog to cause a reload of the whole page so we’re using SACK to send an asynchronous page request to the server to handle the opt-in / opt-out.

To do this, we first need to tell Wordpress to include the SACK library javascript:

// Add SACK requirement to head
add_action ('wp_head', 'expertise_js_header');

function expertise_js_header () {
 wp_print_scripts ( array ('sack') );

The only thing somewhat complicated for using SACK is that we need to figure out what page to post the AJAX requests to; Wordpress comes with a /wp-admin/admin-ajax.php script for this. It’s a unified Ajax handler script that can be used for all AJAX requests. We only need to tell it about a callback function to use depending on which action the page receives. First we define our own actions, handle_signup and handle_signout:

// Configure AJAX callback
add_action ('wp_ajax_handle_signup', "signup_callback");
add_action ('wp_ajax_nopriv_handle_signup', "signup_callback");
add_action ('wp_ajax_handle_signout', "signout_callback");
add_action ('wp_ajax_nopriv_handle_signout', "signout_callback");

Then in our button javascript we use these action names in the SACK initialization:

// Define custom Javascript function
?>
<script type="text/javascript">
//<![CDATA[
function expertise_signup () {
 for (var i=0; i < document.lvlfrm.lvlval.length; i++) {
 if (document.lvlfrm.lvlval[i].checked) {
 var expertise_level = document.lvlfrm.lvlval[i].value;
 }
 }
 var mysack = new sack (
 "<?php bloginfo ('wpurl'); ?>/wp-admin/admin-ajax.php" );

 mysack.execute = 1;
 mysack.method = 'POST';
 mysack.setVar ("action", "handle_signup");
 mysack.setVar ("expertise_level", expertise_level);
 mysack.runAJAX();

 parent.tb_remove();
}

And finally we add the actual callback function:

function signup_callback () {
 $level = $_POST['expertise_level'];
 $levels = array( 'junior', 'medior', 'senior' );
 $thelevel = $levels[$level - 1];
 $error = "";
 $results = "You have signed up as a $thelevel expert!";
 if ($error ) {
 die ( "alert('$error')" );
 }
 die( "document.getElementById('$results_id').innerHTML = '$results'" );
}

The callback function itself is not completely finished here but you’ll probably get the idea from this sample code.

Read More

If  you liked reading this article you might want to read some more articles in 3DN’s Wordpress category:

• New 3DN Techblog
• Add Ajax to Expertise Plugin
• Checking Comments for Requests
• Adding sendmail/SMTP to experts plugin
• Periodic Expertise Events

Or in the Coding category:

• Add Ajax to Expertise Plugin
• Checking Comments for Requests
• Adding sendmail/SMTP to experts plugin
• Periodic Expertise Events
• Expertise Shortcode