Using AJAX in FrontEnd with WordPress Plugin Boilerplate (wppb.io)

by

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' );

}

1 Answer
1

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'
    },

Leave a Comment