10

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.

  1. I have a button with on click event
  2. in that function i have if else statement
  3. if the input fields are blank event.preventdefault() the button click
  4. 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.

4
  • just wont go through from where to where?
    – llamerr
    Commented Jul 14, 2016 at 12:45
  • You need to provide a URL for the ajax request. url: 'some url', I don't think this is not what you want to do.
    – luispcosta
    Commented Jul 14, 2016 at 12:55
  • I am dealing with cross origin, but back end took care of that, since I can GET with no problem Commented Jul 14, 2016 at 13:13
  • This is a dummy URL, The URL I've got works great on GET, even thou it is cross-origin. With unreachable, or miss-spelled URL I would have gotten an error from jquery. Commented Jul 14, 2016 at 13:21

2 Answers 2

11

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.

5
  • 1
    Could you please explain more detail about the issue which you found?
    – Lin
    Commented Jun 27, 2017 at 2:41
  • the button that fired up the AJAX request also reloaded the page interrupting my AJAX inner workings. Commented Jul 4, 2017 at 13:52
  • I am running into this problem. Could you please explain what you did to fix it?
    – JeremyKun
    Commented Dec 25, 2017 at 22:52
  • 1
    My issue was the button that triggered the ajax post caused the webpage to reload before I could get a result, therefore, there was no details on the error. Check your href attribute make sure it doesn't reload the page. Just to be safe put this #0 for the attribute value. So something like this: <a href="#0" id="ajaxCall">AJAX</a> This fixed my issue. Commented Dec 26, 2017 at 15:59
  • You are a genius and a lifesaver. I never suspected this will be the cause. Front-end development is weird.
    – biniam
    Commented Oct 1, 2019 at 15:46
9

When the window is loaded add an event listener for the form 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.