I'm trying to do a tag box similar to that of the backend, but for the frontend. I'm using AJAX to get tag suggestions as the user types in the input field.

I've used AJAX in Wordpress in the past with no problem in themes and such, but right now I'm trying to build a plugin and since it's much more complicated I'm trying to go the object-oriented way with Wordpress Plugin Boilerplate (wppb.io) as a base.

But I can't get it working using the boilerplate. The AJAX call works, but success:function(data) always returns 0 when it should return 'testing' which makes me think my function never gets called. I've been hours at it and I can't spot the mistake

This is my code:

/public/js/my-plugin-public.js

$('#my_plugin_tags').keyup(function() {

    var user_input = $(this).val();
    var user_input_last = $.trim(user_input.split(',').pop());

    $.ajax({
        url: my-plugin.ajax_url,
        type: 'POST',
        data: {
            'user_input': user_input_last
        },
        success:function(data) {
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });

});

/public/class-my-plugin-public.php

/**
 * Register the JavaScript for the public-facing side of the site.
 *
 * @since    1.0.0
 */
public function enqueue_scripts() {
    wp_enqueue_script( 'my-plugin-public', plugin_dir_url( __FILE__)  . 'js/my-plugin-public.js', array( 'jquery' , $this->plugin_name ), $this->version, false );          
    wp_localize_script( 'my-plugin-public', 'my-plugin' , array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}

/public/class-my-plugin-class-public.php

/**
  * Get tag suggestions from while user writes
  *
  * @since      1.0.0
  */

public function tags_autofill_function() {
    echo('Testing');
}

/includes/class-my-plugin.php

/**
 * Register all of the hooks related to the public-facing functionality
 * of the plugin.
 *
 * @since    1.0.0
 * @access   private
 */
private function define_public_hooks() {

    // Load CSS & Scripts
    $plugin_public = new My_Plugin_Public( $this->get_plugin_name(), $this->get_version() );

    $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' );
    $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' );

    // Custom Class from My Plugin
    $plugin_class_public = new My_Plugin_Class_Public();

    $this->loader->add_action( 'wp_ajax_tags_autofill_function', $plugin_class_public , 'tags_autofill_function' );
    $this->loader->add_action( 'wp_ajax_nopriv_tags_autofill_function', $plugin_class_public , 'tags_autofill_function' );

}
up vote 2 down vote accepted

There is no action variable on the data you're passing to Ajax. This way WordPress is sending just a generic call to Ajax which always return 0. You must edit your data on your JS file to something like:

    data: {
        'user_input': user_input_last,
        'action': 'tags_autofill_function'
    },
  • Geez, so much time lost on this. Good eye Bruno. Thanks for spotting my mistake. – Sandra Apr 11 '16 at 13:37

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.