Ajax-POST succeeds only Async is false

Question

I am trying POST ajax call to my back end. It is working fine if I set async: false, but if I remove that it is failing and return undefined in error section

 $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "http://localhost:8000/student/queue/create",
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        success: function (data) {
            console.log("SUCCESS : ", data);

        },
        error: function (e) {
            console.log("ERROR : ", e.responseText);
            alert("ERROR : "+  e.responseText);

        }
    });

Calling my ajax function from button onclick

<button type="submit" id="submit-createqueue" class="btn feedback glass" onclick="sendformDataToBackend()">Submit</button>

I tried Ajax Call returns undefined when async is true but that also not working

function Call(data) {

    return $.ajax({
        url: "http://localhost:8000/student/queue/create",
        type: "POST",
        enctype: 'multipart/form-data',
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,

        error: function (e) {
        console.log("ERROR : ", e.responseText);
        alert("ERROR : "+  e.responseText);
        }

    });
}

Call(data).then(function(data) {
    console.log(data);
    alert("test")
});

You need to stop the form submission that's also happening when you click the submit button. It works with `async: false` because it blocks processing while the request is in process - which is exactly why you shouldn't use it. I'd also strongly suggest you stop using `on*` event attributes. Use unobtrusive event handlers instead — Rory McCrossan, Aug 24 '17 at 08:59
Thanks, I moved outside of form tag, Now it is working for async also — Jeya Kumar, Aug 24 '17 at 09:27
Glad you got it working, but that's not really a workable solution as it breaks accessibility functionality. I added an answer for you which gives a better method - by hooking to the `submit` event of your `
` element — Rory McCrossan, Aug 24 '17 at 09:31

score 2 · Accepted Answer · answered Aug 24 '17 at 09:30

You need to stop the form submission that's also happening when you click the submit button. It works with async: false because it blocks processing while the request is in process - which is exactly why you shouldn't use it.

I'd also strongly suggest you stop using on* event attributes. Use unobtrusive event handlers instead.

As you're using jQuery, you can achieve both of those using this code:

$('#yourFormElement').on('submit', function(e) {
  e.preventDefault();

  var data = // your logic to get form data here...

  $.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    url: "http://localhost:8000/student/queue/create",
    data: data,
    processData: false,
    contentType: false,
    cache: false,
    timeout: 600000,
    success: function (data) {
      console.log("SUCCESS : ", data);
    },
    error: function (e) {
      console.log("ERROR : ", e.responseText);
      alert("ERROR : " +  e.responseText);
    }
  });
});

score 0 · Answer 2 · answered Aug 24 '17 at 09:04

0

Please try with input type button replaced with submit button

answered Aug 24 '17 at 09:04

This isn't really a workable solution as it affects accessibility standards. – Rory McCrossan Aug 24 '17 at 09:17

Ajax-POST succeeds only Async is false

2 Answers2