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, privacy policy and cookie policy

Browse other questions tagged or ask your own question.