My ajax requests work individually, (if I wait for each request to return before submitting the next), but if I submit a bunch of requests at the same time, (eg click multiple buttons), only the last action returns a response. It's like each request is overwriting/cancelling out the previous one.

I am using WP's admin-ajax.php, like so:

<?php
$nonce = wp_create_nonce("my_nonce");

$link = admin_url('admin-ajax.php?action=add_item&post_id='.$post->ID.'&nonce='.$nonce);
echo '<a class="add_item" data-action="add_item" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">add item</a>';
?>

(I have several of these with different post->IDs on a page, but the nonce is only set once and is the same for the whole page).

And then some JS like this:

$(".prod_btns a").click(function(e) {
    e.preventDefault(); 
    var action = $(this).data("action");
    var post_id = $(this).data("post_id");
    var nonce = $(this).data("nonce");

    $.ajax({
        type : "post",
        dataType : "json",
        url : myAjax.ajaxurl,
        data : {action: action, post_id : post_id, nonce: nonce},
        success: function(response) {
            if(response.type == "success") {
                alert( "success" );
            } else {
                alert( "fail" );
            }
        }
    });
    return false;
});

... and a receiving function like so:

add_action( 'wp_ajax_add_item', 'add_item_funct');
function add_item_funct() {
  if ( !wp_verify_nonce( $_REQUEST['nonce'], 'my_nonce' ) ) {
    exit( "Ajax authentication failed!" );
  }
  // do some stuff...

  $result['type'] = "success";

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $result = json_encode($result);
    echo $result;
  } else {
    header("Location: ".$_SERVER["HTTP_REFERER"]);
  }
  die();
}

This all works fine if you click only 1 link and wait for it to return "success", then click the next, but if you click multiple "add item" links simultaneously, only the last one returned a success message.

What am I missing? Thanks for taking the time...

My ajax requests work individually, (if I wait for each request to return before submitting the next), but if I submit a bunch of requests at the same time, (eg click multiple buttons), only the last action returns a response. It's like each request is overwriting/cancelling out the previous one.

I am using WP's admin-ajax.php, like so:

<?php
$nonce = wp_create_nonce("my_nonce");

$link = admin_url('admin-ajax.php?action=add_item&post_id='.$post->ID.'&nonce='.$nonce);
echo '<a class="add_item" data-action="add_item" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">add item</a>';
?>

(I have several of these with different post->IDs on a page, but the nonce is only set once and is the same for the whole page).

And then some JS like this:

$(".prod_btns a").click(function(e) {
    e.preventDefault(); 
    var action = $(this).data("action");
    var post_id = $(this).data("post_id");
    var nonce = $(this).data("nonce");

    $.ajax({
        type : "post",
        dataType : "json",
        url : myAjax.ajaxurl,
        data : {action: action, post_id : post_id, nonce: nonce},
        success: function(response) {
            if(response.type == "success") {
                alert( "success" );
            } else {
                alert( "fail" );
            }
        }
    });
    return false;
});

... and a receiving function like so:

add_action( 'wp_ajax_add_item', 'add_item_funct');
function add_item_funct() {
  if ( !wp_verify_nonce( $_REQUEST['nonce'], 'my_nonce' ) ) {
    exit( "Ajax authentication failed!" );
  }
  // do some stuff...

  $result['type'] = "success";

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $result = json_encode($result);
    echo $result;
  } else {
    header("Location: ".$_SERVER["HTTP_REFERER"]);
  }
  die();
}

This all works fine if you click only 1 link and wait for it to return "success", then click the next, but if you click multiple "add item" links simultaneously, only the last one returned a success message.

What am I missing? Thanks for taking the time...

• plugin-development
• ajax
• jquery

• 1 If you haven't already I'd try watching the requests in your browser's debug window to see if you can see them complete there - i.e. they are completing fine but JavaScript it losing the notification? - or if they time out on the network; and I'd add error-log trace to the function in WordPress and watch the site's error log to try and work out what's happening there too. – Rup Commented Sep 15, 2020 at 16:44

1 Answer 1

@Rup's comment above led me to the answer; my wp-ajax request was functioning fine, but my incomplete understanding of jquery's $(this) selector meant that I was targeting the last item clicked with the success response each time. This question can now be closed.