I've been looking how to handle ajax requests in a plugin with wordpress. I have a found a cool article about this in the codex. I think I got the basics but it seems I can't get my handler function to... well, handle the ajax request.

I have my_plugin structured like the wordpress plugin boilerplate I found on wppb.me.

So I have my javascript that does an ajax request like this in my_plugin/public/js/my-script.js

var postData = {
    'action': "my_action",
    /* some more data */
//ajaxurl var is correctly defined in the file
ajax(ajaxurl, function(response){ //this function is homemade and works correctly
    // do smth with response
}, postData)

This script is correctly enqueued in my_plugin/public/class-my-plugin-public.php like this :

wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/my-script.js', array( 'jquery' ), null, 'all' );

I have a method inside my-plugin/includes/class-my-plugin.php that is supposed to add actions so that admin-ajax.php knows which function should handle the ajax call from client.

$this->loader->add_action( 'wp_ajax_my_action', array($plugin_public, 'my_action') );
$this->loader->add_action( 'wp_ajax_nopriv_my_action', array($plugin_public, 'my_action') );

And finally, here is the handler method that is supposed to handle the ajax request in my_plugin/public/class-my-plugin-public.php :

function my_action() {
    //other stuff

    echo 'hello';

    wp_die(); //I've read this is compulsory in a tutorial for ajax requests

What I expected is : My script is enqueued, and the ajax request is fired. Then, I add an action to tell wp-ajax which method is to handle this request, and I have prepared this function in my public facing class. So the response for the ajax request should be 'hello' string.

But the only response I get with this ajax request is a (400) bad response.

I couldn't find any tutorial out there featuring examples with a similar structure to the wordpress plugin boilerplate. Everything is in the same file in the examples. My guess atm is that the action name I have to put in my postData var in my-script.js might be wrong, because I'm adding the hook action like add_action( 'wp_ajax_my_action', array($plugin_public, 'my_action') ); and not just add_action( 'wp_ajax_my_action', 'my_action') );. And the later example woudn't work since the my_action function and my add_action() are not called in the same file...

By the way, I have other hooks up and functional with this synthax so...

I would really appreciate any explanation or even hint.

  • 1
    'action': my_action, is probably the problem. my_action needs quotes around it or JavaScript is going to set action to be the value of a variable called my_action, which will be undefined. Also, is the my_action function actually a method of a class? Aug 29, 2018 at 13:47
  • Sorry that it wasn't clear, it was a bit hard to explain... this my_action is the actual name of my handler function like "my_action". This function is a method of the my-plugin-public class. That is why I use the array synthax for the add_action directive (which is called in an other file). There shouldn't be any problem with typo or namespace since this procedure works with other hooks that are not ajax-related
    – Maayam
    Aug 29, 2018 at 14:05


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.