I keep getting this error:
POST http://localhost/wptest2/wp-admin/admin-ajax.php 400 (Bad Request)
(anonymous) @ VM12565:1
send @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:4
ajax @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:4
(anonymous) @ options-general.php?page=fvc-settings:784
dispatch @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:3
r.handle @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:3
- In the code below, ajaxPost() is hooked to the admin footer of my plugin.
- On clicking the button selected by jQuery, it should fire the registered post request and return a simple response.
This is not what happens with jQuery.post() or $.ajax(). I tried several things mentioned below in the comments but can't get it working, can anyone tell the issue?
function ajaxPost() {
?>
<script>
jQuery(document).ready(function($) {
$('#previousButton').click(function() {
var postData = {
action : 'selectTargetsWithOffset',
data : {
offsetMultiplier : 1,
incrementSize : 10
},
success : function(response) {
console.log(`=====jQuery success=====`);
}
};
var handleResponse = function(response) {
console.log(response, `=====response=====`);
};
jQuery.post(ajaxurl, postData, handleResponse);
// this code also threw a 400 error when
// I commented out the above code instead
// $.ajax({
// type: "POST",
// url: ajaxurl,
// dataType: "json",
// data: {
// action: "selectTargetsWithOffset",
// },
// success: function() {
// console.log(response, `=====response
// from $.ajax}=====`);
// }
// });
})
})
</script>
<?php
}
add_action('admin_footer', 'ajaxPost');
function selectTargetsWithOffset() {
wp_send_json([ 'message' => 'from back end' ]);
wp_die();
}
add_action('wp_ajax_selectTargetsWithOffset', 'selectTargetsWithOffset');
Also tried - Going into admin-ajax.php and changing the response code from 400 to 420 to see if it would do anything. I did get some wierd error reflecting the change.
if ( is_user_logged_in() ) {
// If no action is registered, return a Bad Request response.
if ( ! has_action( "wp_ajax_{$action}" ) ) {
wp_die( 'Test', 420 );
}
- Changing '0' in arg1 of wp_die() to "Test" and visiting this url in the browser: http://localhost/wptest2/wp-admin/admin-ajax.php . I still see 0 rendered on the page (alone) at this address
Adding the following to the top of admin-ajax.php:
?>
<script>
console.log(`=====TEST=====`);
var request = "<?php echo $_REQUEST ?>";
console.log(request['action'], `=====request=====`);
</script>
<?php
When I try to trigger the ajax call in my admin area, I still get the 400 bad response console log only. However when I directly navigate to the URL, now I see the ===TEST=== statement and request is marked as undefined (as I would expect). I take this to mean something about how I call the ajax request is wrong.
Here is my HTML code for the button that does the call:
<button id="previousButton">Previous</button>
In response to the simplified callback suggestion
Here is the console log:
=====jQuery success=====
VM13659:1 POST http://localhost/wptest2/wp-admin/admin-ajax.php 400 (Bad Request)
(anonymous) @ VM13659:1
send @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:4
ajax @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:4
n.(anonymous function) @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:4
(anonymous) @ options-general.php?page=fvc-settings:785
dispatch @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:3
r.handle @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:3
And here is the code:
function ajaxPost() {
?>
<script>
jQuery(document).ready(function() {
jQuery('#previousButton').click(function() {
var postData = {
action : 'selectTargetsWithOffset',
data : {
offsetMultiplier : 1,
incrementSize : 10
},
success : function(response) {
console.log(`=====jQuery success=====`);
}
};
var handleResponse = function(response) {
console.log(response, `=====response=====`);
};
jQuery.post(ajaxurl, postData, handleResponse);
});
})
</script>
<?php
}
add_action('admin_footer', 'ajaxPost');
function selectTargetsWithOffsetcb() {
print_r($_POST);
die();
}
add_action( 'wp_ajax_selectTargetsWithOffset', "selectTargetsWithOffsetcb");
add_action( 'wp_ajax_nopriv_selectTargetsWithOffset', "selectTargetsWithOffsetcb" );
There is no print_r() output on the page itself, it stays the same without any refreshing
It is worth noting again that the debug code ====TEST=== in admin-ajax.php failed to log. I think this indicates the request doesn't reach that file for some reason (since navigating to that file in browser does cause it to log to console)
Also tried this, but also a 400 error:
function ajaxPost() {
?>
<script>
jQuery(document).ready(function() {
jQuery(document).on("click","#previousButton", function() {
jQuery.ajax({
url: "<?php echo admin_url( 'admin-ajax.php' ) ?>",
data: {"action":"selectTargetsWithOffset","datas": {"name": "yourfields"}},
type:"post",
success: function(data) { alert(data); }
})
});
})
</script>
<?php
}
add_action('admin_footer', 'ajaxPost');
