Reputation: 1745
I've implemented an AJAX call in my JS on a Wordpress front-end page. The AJAX call is successful (sucess() is called, and I see a 200 response on complete()), however the AJAX call does not appear in my network panel within Chrome. It's my understanding, based on working with AJAX calls in the past, that this call should appear in the network panel within Chrome for further inspection. I'm looking in the XHR subsection of the network panel, and see no calls being made. I have, however, also looked in the 'all' section of the network panel to verify that the call is never showing up in the network panel at all. I'm curious why this would be.
Here's my JS:
jQuery(document).ready(function() {
jQuery.ajax({
dataType: 'json',
method: 'POST',
url: "<?php echo admin_url('admin-ajax.php'); ?>",
data: {action: 'myaction'}
})
.success(function(data) {
console.log( "success " + data);
})
.fail(function() {
console.log( "error" );
})
.complete(function(xhr, textStatus) {
console.log(xhr.status);
})
.always(function() {
console.log( "complete" );
});
}
My console logs the following output:
success 0
complete
200
It's clearly hitting success, getting a 200 response, and not failing. Shouldn't this all show up clearly in the network panel?
Upvotes: 2
Views: 4634
Reputation: 1023
Faced this situation today, I found out that I was leaving "3rd-party requests" on, which causes Network tab not logging my Ajax requests. Silly me, hope it helps someone.
Upvotes: 1
Reputation: 15595
I had a similar issue by mistake instead of clicking clear network fields I clicked stop recording network log.So after an hour of trouble I fixed the issue by starting the record network field again.
Hope this help someone facing the same issue.
Upvotes: 2
Reputation: 131
I'am not sure if this is related or not but a while ago I had the same problem. Request was just returning zero, which usually happens when you try to call WP-ajax action which isn't registered. I have managed to do WP-ajax calls before so I didn't know why this time it wasn't working. I think it was because ajax call data type is json. I stumbled upon an example where data parameter was a FormData object:
var data = new FormData();
data.append('action', 'your_action');
data.append('somedata', somedata);
$.ajax({
method: "POST",
url: "<?php echo esc_url(admin_url('admin-ajax.php')); ?>",
processData: false,
contentType: false,
cache: false,
data: data,
dataType: "json",
success: function(response, textStatus, jqXHR) {
if (response.status === "ok") {
// Success
} else {
console.log('Status: ' + response.status);
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("Error: " + textStatus);
console.log(errorThrown);
},
complete: function(jqXHR, textStatus, errorThrown) {
}
});
If someone has better knowledge please do explain why this works.
I hope this helps you.
Upvotes: 0