I am trying to learn how to process AJAX requests in Wordpress the correct way. To do this I am adapting this tutorial to create a super simple AJAX request to place the ID of a post (from a link) into my page content.

The Logic

1. When the #our-work a links are clicked [js]
2. Get the post ID (from the data-id attribute) & store it as postID variable [js]
3. Pass postID via an AJAX (using the WP's admin-ajax.php file) [js]
4. The example_ajax_request function will pick up the ID & simply echo it [php]
5. If successful, append the server response to the #hero div.

I realise this has no benefit but once I have that working I will amend the function to serve a real purpose.

My Code

Here is a copy of the function I have created in the plugins folder:

wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'acl-plugin.js', array( 'jquery' ) );

wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

function example_ajax_request() {
    if ( isset($_REQUEST) ) {
        $postID = $_REQUEST['postID'];
        echo $postID;
    }
    die();
}
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

And here is a copy of the JS file

jQuery(document).ready(function($) {
    $('#our-work a').click( function() {
        var postID = $(this).attr("data-id");

        $.ajax({
            url: MyAjax.ajaxurl,
            data: {
                'action':'example_ajax_request',
                'postID' : postID
            },
            success:function(data) {
                $('#hero').append( "Well this seems to work" + data );
            },
            error: function(errorThrown){
                console.log("This has thrown an error:" + errorThrown);
            }
        });
        return false;
    });
});

The Problem

Upon clicking the link the JS does fire but yields the following response:

<div id="hero">
    Well this seems to work 0
</div>

Using an alert I know the ID is being picked up before the AJAX request. So the problem is in my function. To find out more, I (temporarily) tweaked WP's admin-ajax.php file, so that I could find out which die(); was yielding the response of "0".

It is the very last one in the file which I thought wouldn't fire as I have a die(); command in my own function. Can someone please point out where I am going wrong?

I am trying to learn how to process AJAX requests in Wordpress the correct way. To do this I am adapting this tutorial to create a super simple AJAX request to place the ID of a post (from a link) into my page content.

The Logic

1. When the #our-work a links are clicked [js]
2. Get the post ID (from the data-id attribute) & store it as postID variable [js]
3. Pass postID via an AJAX (using the WP's admin-ajax.php file) [js]
4. The example_ajax_request function will pick up the ID & simply echo it [php]
5. If successful, append the server response to the #hero div.

I realise this has no benefit but once I have that working I will amend the function to serve a real purpose.

My Code

Here is a copy of the function I have created in the plugins folder:

wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'acl-plugin.js', array( 'jquery' ) );

wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

function example_ajax_request() {
    if ( isset($_REQUEST) ) {
        $postID = $_REQUEST['postID'];
        echo $postID;
    }
    die();
}
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

And here is a copy of the JS file

jQuery(document).ready(function($) {
    $('#our-work a').click( function() {
        var postID = $(this).attr("data-id");

        $.ajax({
            url: MyAjax.ajaxurl,
            data: {
                'action':'example_ajax_request',
                'postID' : postID
            },
            success:function(data) {
                $('#hero').append( "Well this seems to work" + data );
            },
            error: function(errorThrown){
                console.log("This has thrown an error:" + errorThrown);
            }
        });
        return false;
    });
});

The Problem

Upon clicking the link the JS does fire but yields the following response:

<div id="hero">
    Well this seems to work 0
</div>

Using an alert I know the ID is being picked up before the AJAX request. So the problem is in my function. To find out more, I (temporarily) tweaked WP's admin-ajax.php file, so that I could find out which die(); was yielding the response of "0".

It is the very last one in the file which I thought wouldn't fire as I have a die(); command in my own function. Can someone please point out where I am going wrong?

• plugins
• plugin-development
• jquery
• ajax

• Are you testing it as a logged in user? – Krzysiek Dróżdż Commented Mar 30, 2019 at 12:51
• 1 Sorry @KrzysiekDróżdż I can't recall any details about this issue, it's over 5 years old. This approach is likely to antiquated now anyway. – Sheixt Commented Apr 3, 2019 at 16:20

3 Answers 3

This is one of those rare times I can proudly say... there isn't any problem here!

The reason the server is returning with 0 is because I was logged in! The wp_ajax_nopriv_example_ajax_request is only for users who are not logged in. After logging out this works fine.

So if you are looking to do the same thing, just make sure you have both actions below the function:

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

Another interesting thing to note is that Wordpress has it's own die() called wp_die(). I was getting that 0 at the end of my AJAX calls till I found it too.

echo(json_encode($return));
wp_die();

There's also wp_send_json_success and wp_send_json_error. All these return what you'd expect without the trailing 0.

wp_send_json_success($data);

will be returned as json with a data element

success: function(trn) {
    console.log(trn.data)
}

Use wp_die(); insted of die(); in function.

add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
function example_ajax_request() {

    // Your code goes here.        

    wp_die();
}