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...
Share Improve this question edited Sep 15, 2020 at 10:08 Neil Hillman asked Sep 13, 2020 at 14:14 Neil HillmanNeil Hillman 1831 silver badge9 bronze badges 1- 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
Reset to default 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.