[Solved] XHR failed loading: POST
so I am trying to post with ajax, and it just wont go through.
here is my javascript
$.ajax({
type: 'POST',
contentType: "",
url: 'some url',
data: order,
dataType: 'json',
success: function() {
Materialize.toast('Order added successfully', 4000, 'android-success');
console.log('order posted');
},
error: function() {
Materialize.toast('Something went wrong', 4000, 'android-error');
}
}); // $.ajax post
I am not getting an error nor am I getting a success from ajax. But I am getting a chrome console error listed above XHR failed loading: POST
I have tried setting content type and data type to no avail. My guess, the problem is in the object format or something of that sort.
Probably useful information —
this is a basic outline of my code.
- I have a button with on click event
- in that function i have if else statement
- if the input fields are blank event.preventdefault() the button click
- else ajax post
This is the info under the failed log
send @ jquery-3.1.0.js:9392
ajax @ jquery-3.1.0.js:8999
(anonymous function) @ ajax.js:20
mightThrow @ jquery-3.1.0.js:3508
process @ jquery-3.1.0.js:3576
Any help on this matter really appreciated.
Solution #1:
I got it to work. The problem was with the page reloading. So before the post request could go through the web page would reload which resulted in no error but just a failed log. Ugh, such a rookie mistake.
Solution #2:
Old question I know but if it comes up on google search it is still relevant.
when the window is loaded add an event listener for the for and prevent the default action.
<script>
window.addEventListener("load", function () {
//not jquery!
// Access the form element...
var form = document.getElementById("myFormId");
// ...and take over its submit event.
form.addEventListener("submit", function (event) {
event.preventDefault(); // prevent form submission and reloading the page.
//your code to validate or do what you need with the form.
});
});
</script>