Why does my Ajax request keep returning a 400 Error code?

I am facing an issue with WP AJAX.

jQuery.ajax({
    type: 'POST',
    url: spaceajax.ajaxurl, // this contains my admin ajax URL
    data: {
        "event_id"  : 1,
        "space_id"  : 1,
        "booking_id": 1,
        'action'    : 'requestContract'
    },
    success: function(result) {
        alert("Success!");
    }
});

in my functions.php 

function requestContract(){
    echo "Checkpoint"; die; 
}

add_action( 'wp_ajax_requestContract', 'requestContract' );
add_action( 'wp_ajax_nopriv_requestContract', 'requestContract' );

However, I am encountering a 400 Bad Request error. Any ideas on what could be causing this?

javascriptajaxwordpress

Answer №1

I decided to tackle my own question head-on. Following advice from @daddygames that a 400 Bad Request error can occur when URL parameters are incorrect, I made sure to remove any formatting on the ajax request. This simple adjustment solved the issue.

To help others facing similar problems, here is the updated code snippet:

jQuery.ajax({
    type: 'POST',
    url: spaceajax.ajaxurl, // This contains my admin ajax URL
    data: {
        "event_id":1,
        "space_id":1,
        "booking_id":1,
        'action':'requestContract'
    },
    success: function(result) {
        alert("Success!");
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to automatically embed a p5.js canvas into an HTML canvas with the drawImage() method

Whenever I attempt to draw the p5.js canvas into an HTML canvas using drawImage(), I always encounter this error: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type ' ...

javascripthtmlp5.jsprocessing.js

Combining Vue and Laravel: Efficiently retrieve API data stored as an array within a tuple

I am facing an issue with setting data from an API into an array in vue.js. The data obtained is in JSON format from the API. Could you please guide me on the syntax for this? {"id":1613, "name_org":"US company", "picture":"default.jpg", "headerpic":"no- ...

javascriptarrayslaravelvue.js

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

javascriptnode.jsnpmgulpnpmjs

Create JavaScript variable from either HTML or database sources

Hello, I am trying to implement a counter that retrieves its value from a JavaScript file, but I would like to customize it. Below is the JavaScript code: function updateCounter(count) { var divisor = 100; var speed = Math.ceil(count / divisor); ...

c#javascriptasp.nethtml

Improving the method for adding an element to an HTML document with jQuery

What is the best way to add this element to a specific DIV Class using JQUERY in an optimized manner? The elements are generated dynamically and I want to use .AppendTo to display them inside <div class='parent-list-workorder'>. This is wh ...

javascriptjqueryhtmlcssajax

Tips for resolving the issue: "Encountered error loading module script..." in Angular 8 and Electron 5

I have been working on developing an Electron 5 app using Angular 8. Despite following numerous online tutorials, I keep encountering the same error. Initially, I set up a new project and ran ng serve --open, which successfully displayed the default angul ...

javascriptangularelectron

Creating a consistent base URL for both Vue and Apache reverse proxy configurations

Currently, I am experimenting with a Vue app and testing it using pm2 in conjunction with Apache. After starting the app with pm2 and running it on port 3000, I then utilize an Apache reverse proxy to access the app through a domain and HTTPS. However, I e ...

javascriptvue.jsvuejs2

What is the process for inputting a value within single quotation marks?

I'm working with a code snippet that looks like this: for(var j=0; j < this.arr.length; j++) { arr.push({ id: 'j', label: this.arr[j], display: () => this.arr[j] }) } I am curious about ho ...

javascriptarraystypescript

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

javascriptjqueryhtml

What is the best way to integrate Next.js with Strapi (or the other way around)?

My goal is to develop an application utilizing Next.js for the frontend, fetching data from a Strapi API hosted on the same server. The plan is to have Strapi handle API and admin routes, while Next.js manages all other routes. I intend to use fetch in Nex ...

javascripttypescriptnext.jsstrapi

What is the best way to identify the clicked cell?

I'm a JavaScript newbie trying to work with ExtJS 3.4. I've set up a basic tree with 3 columns and now I want to figure out which cell, row, or column has been selected. Currently, I'm following the example provided by Sencha at : var tr ...

javascriptjqueryextjs3

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...

javascripthtmlvariables

There seems to be an issue with posting JSON data correctly

Currently, I am attempting to include an object with numerous attributes within it. This is the object I am trying to use with $.post: ({"fname" : fname, "lname" : lname, "gender" : gender, "traits" : { "iq" : inte ...

javascriptjqueryjsonapipost

Avoid fetching objects on the PHP page that have been passed from an AJAX request

Hello, I am having trouble retrieving Ajax Data in my PhP page as it is throwing an error. I am passing the data as a JSON object. The error message I am receiving is shown below: https://i.stack.imgur.com/k8Va6.png Here is the code from Edit.php: $(&ap ...

phpjsonajax

Leveraging CSS in React/JSX

I am struggling to understand how to implement CSS with React. I have tried using inline styles but couldn't get it to work. Additionally, I am unsure where to apply CSS in my JSX code within the react class. For example, in one of my react classes, ...

javascripthtmlcssreactjs

Spinning an object smoothly in the opposite direction of the OrbitControls camera's y rotation in three.js

Is there a way to use OrbitControls in three.js to make a planeMesh always remain facing the camera? I've attempted some code but it's not quite working as expected. I want the planeMesh to slowly readjust its orientation only when the camera mov ...

javascriptcanvas3dthree.js

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

Encountering an error message stating "Unable to recognize property 'screen' of undefined" when incorporating Quasar components into a Storybook story

I seem to be encountering an issue when trying to render Quasar components in Storybook using Vue and Quasar. I have a suspicion that the story is not recognizing the Quasar tags. I followed the steps to set up the project from and then initiated npx sb i ...

javascriptvue.jsstorybookquasar-framework

Having trouble getting the onClick event to trigger in ReactJS buttons

The buttons are not functioning as expected, allowing for the addition of positive, neutral, or negative feedback. Interestingly, when I added a default button using different syntax to add negative feedback, it worked. This suggests that there may be an ...

javascriptreactjs

Locate the element within the specified parameters using [protractor]

Here's my query: element.all(by.repeater('user in users')).then(function(rows) { // looking to locate an element in rows using CSS selector, for example } UPDATE : I want to clarify that I am trying to find an element using rows[rows.len ...

javascriptangularjsseleniumprotractore2e-testing