Well Thank you in advance for taking the time to read through my question.
The situation is as follows:
I have a Wrodpress server with a singular site in the wp-admin/sites/contactform/index.php
From that site I want to make an Ajax call however I get a '/wp-admin/admin-ajax.php:1 Failed to load resource: the server responded with a status of 400 (Bad Request) ' error upon the initial loading of the site and a
' https://THECORRECTURL/wp-admin/admin-ajax.php 400 (Bad Request)' error when I execute the method.
My suspicion is that the errors are provoked by missing permissions to access the admin-ajax.php file.
I'd like to know what you think.
Here is the Code:
In a js file in the directory of 'contactform/dt/wb.js':
jQuery(document).ready(function($) {
$('#btn-x').click(function() {
$.ajax({
url: '../../admin-ajax.php', // The URL of the WordPress AJAX handler
type: 'POST', // The HTTP method of the request
data: { // The data to be sent with the request
action: 'usystorequest',
},
success: function(response) { // A function to be called if the request is successful
if (response) {$('#mail_sent').show(); //mail got sent
}
else { $('#mail_not_sent').show(); //mail didnt get sent
}
}
});
});
});
In the functions.php File in 'contactform':
add_action('wp_enqueue_scripts', function(){
wp_enqueue_script('wb', get_stylesheet_directory_uri() . '/dt/wb.js',['jquery'], '1.0', false);
wp_enqueue_script('jquery', get_stylesheet_directory_uri() . '/dt/jquery-3.4.1.min.js',[], '1.0', false);
});
//Function executed by ajax call
add_action("wp_ajax_usystorequest", "usystorequest");
add_action("wp_ajax_nopriv_usystorequest", "usystorequest");
function usystorequest(){
echo ':test:';
wp_die();
}
(I am not using a Contactform plugin because i am sending Information that gets calculated in js and the site is seperated from the usual structure with themes and plugins because of conflicts with the Plugins and Themes - its simply easier this way. A prior version of what I currently want to update already runs there just without ajax)
I added a nopriv ajax call so you dont need admin permissions (be logged in) to execute the ajax function.
The usystorequest function is kept as easy as possible to exclude the source of the error is the code.
I tried doing it over a custom ajax handler, here is the code. It got me the same error:
FUNCTIONS.PHP
// Step 1: Add a new endpoint in your functions.php file
add_action( 'init', 'add_my_endpoint' );
function add_my_endpoint() {
add_rewrite_endpoint( 'my-endpoint', EP_ROOT );
}
// Step 2: Add a function to handle the request
add_action( 'template_redirect', 'my_endpoint_handler' );
function my_endpoint_handler() {
global $wp_query;
if ( ! isset( $wp_query->query_vars['my-endpoint'] ) ) {
return;
}
// Handle the request
if ( $_SERVER['REQUEST_METHOD'] == 'GET' && isset( $_GET['action'] ) && $_GET['action'] == 'usystorequest' ) {
usystorequest();
exit;
}
}
JAVASCRIPT WB.JS FILE
// Step 3: Update your AJAX call to use the new endpoint
jQuery(document).ready(function($) {
$('#btn-x').click(function() {
$.ajax({
url: '/?my-endpoint=1', // The URL of the custom AJAX handler
type: 'GET', // The HTTP method of the request
data: { // The data to be sent with the request
action: 'usystorequest', // The name of the action to be triggered in the WordPress backend (functions.php)
},
success: function(response) { // A function to be called if the request is successful
if (response) {$('#mail_sent').show(); //mail got sent
}
else { $('#mail_not_sent').show(); //mail didnt get sent
}
}
});
});
});