Why is my AJAX call not working?

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.

Read More

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!

Related posts

1 comment

  1. Okay so NOW I have the entire solution. It was two things:

    1. Caching was the first part of the issue. Cleared cache, deactivated caching plugin for the time-being.
    2. The second, less obvious issue was that, for NOT logged-in users, the response from the AJAX call was returning the entire HTML document in the response area. It turns out I had a “redirection” function in my functions.php file that was causing this. It’s designed to redirect users below author back to the front-end so they never access the backend and admin-ajax.php technically is operating from the admin side so that was the issue.

Comments are closed.