I have similar code working from within a theme’s functions.php file, but I want to move it to a plugin. I’ve assembled the following but for some reason, this method is having trouble at the AJAX call and always returns zero.
The intention here is that the form will be on the front-end and usable by either logged-in or NOT logged-in users.
Here’s my plugin code:
/*
Plugin Name: AAA Hello World
Plugin URI: http://helloworld.com
Description: AJAX response to form submission
Version: 1.0
Author: John Doe
Author URI: http://helloworld.com
*/
class RespondToMyClicks {
function __construct() {
add_action( 'wp_enqueue_scripts', array( &$this, 'click_response_styles' ) );
add_action( 'wp_enqueue_scripts', array( &$this, 'click_response_scripts' ) );
if( is_admin() ) {
add_action( 'wp_ajax_the_ajax_hook', array( &$this, 'process_clicky_form' ) );
add_action( 'wp_ajax_nopriv_the_ajax_hook', array( &$this, 'process_clicky_form' ) );
}
add_shortcode( 'click_response_form', array( &$this, 'click_response_form' ) );
}
public function click_response_styles() {
wp_register_style( 'respond-to-my-clicks', plugins_url( dirname( plugin_basename( __FILE__ ) ) . '/styles.css' ) );
wp_enqueue_style( 'respond-to-my-clicks' );
}
public function click_response_scripts() {
wp_enqueue_script( 'respond-to-my-clicks', plugin_dir_url( __FILE__ ) . 'ajax.js', array( 'jquery' ) );
wp_localize_script( 'respond-to-my-clicks', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
public function process_clicky_form() {
if( !empty( $_POST ) && wp_verify_nonce( $_POST['post_filtration'], 'post_filter_action' ) ) {
echo "Hello World";
die();
}
}
public function click_response_form() {
$the_form = '<form id="theForm" method="post" action="">' .
wp_nonce_field( 'post_filter_action', 'post_filtration' ) .
'<input name="action" type="hidden" value="the_ajax_hook" />
<label class="check"><input type="checkbox" name="change_me" value="" onChange="submit_me();" /> Click me for a response</label>
</form>
<div id="response_area"></div>';
return $the_form;
}
}
new RespondToMyClicks();
And here’s my Javascript file code:
function submit_me() {
jQuery("#response_area").fadeOut("slow");
jQuery.post(the_ajax_script.ajaxurl,
jQuery("#theForm").serialize(),
function(response_from_the_action_function){
jQuery("#response_area").html(response_from_the_action_function).fadeIn("fast");
}
)
}
I’ve been looking at this too long and have tried different variations of code so hopefully someone can point out the obvious cuz I’m just plain missing it. Thanks!
Okay so NOW I have the entire solution. It was two things: