How to Make a Jquery "$.Post" Request Synchronous

how to make a jquery $.post request synchronous

jQuery < 1.8

May I suggest that you use $.ajax() instead of $.post() as it's much more customizable.

If you are calling $.post(), e.g., like this:

$.post( url, data, success, dataType );

You could turn it into its $.ajax() equivalent:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  async:false
});

Please note the async:false at the end of the $.ajax() parameter object.

Here you have a full detail of the $.ajax() parameters: jQuery.ajax() – jQuery API Documentation.

---

jQuery >=1.8 "async:false" deprecation notice

jQuery >=1.8 won't block the UI during the http request, so we have to use a workaround to stop user interaction as long as the request is processed. For example:

• use a plugin e.g. BlockUI;
• manually add an overlay before calling $.ajax(), and then remove it when the AJAX .done() callback is called.

Please have a look at this answer for an example.

How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here's what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Synchronous JQuery.post()

I actually found that adding this snippet worked so I didn't have to change my .post() to .ajax()

$.ajaxSetup({
async: false
});

I'm not sure if it will also change the settings of my other ajax calls though

How to make JQuery-AJAX request synchronous

From jQuery.ajax()

async Boolean

Default: true

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

So in your request, you must do async: false instead of async: "false".

Update:

The return value of ajaxSubmit is not the return value of the success: function(){...}. ajaxSubmit returns no value at all, which is equivalent to undefined, which in turn evaluates to true.

And that is the reason, why the form is always submitted and is independent of sending the request synchronous or not.

If you want to submit the form only, when the response is "Successful", you must return false from ajaxSubmit and then submit the form in the success function, as @halilb already suggested.

Something along these lines should work

function ajaxSubmit() {
    var password = $.trim($('#employee_password').val());
    $.ajax({
        type: "POST",
        url: "checkpass.php",
        data: "password="+password,
        success: function(response) {
            if(response == "Successful")
            {
                $('form').removeAttr('onsubmit'); // prevent endless loop
                $('form').submit();
            }
        }
    });

    return false;
}

Is JQuery $.post() asynchronous?

All ajax request are asynchronos as it acronym suggest.
(Asynchronous Javascript and XML)

You can refer the api documentation of $.post() in Jquery website

Which clearly says that

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

The success callback function is passed the returned data, which will
be an XML root element or a text string depending on the MIME type of
the response. It is also passed the text status of the response.

From above extract we can understand that $.post() is asynchronous.

For jquery versions < 1.8 you can use async:false to make it synchronous.
Afterwards it is depreciated.
Anyway it is not a recommended practice to use this parameter

For jquery versions >= 1.8 you can use .done() callback. in which you can add all your operations which you need to perform after ajax call

How to make $.get() function synchronous in jQuery?

$.get also accepts parameter like this

$.get({
  url: url,// mandatory
  data: data,
  success: success,
  dataType: dataType,
  async:false // to make it synchronous
});

synchronous POST with jquery 1.7

IE8 does not seem to be fully supporting CORS - http://mcgivery.com/ie8-and-cors/
This could be your issue.

You should be able to use this script to fix the issue. https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

Simply add the script to your HTML and call the ajax request as you normally would. The plugin should in the background handle all the conversions.

jQuery: Performing synchronous AJAX request followed by a chain of other ajax requests

No need to make that synchornuous. If u want the "PART 2" and "PART 3" to wait for the ajax-request to finish just put them into a function and call them on success:

function onCheckValidData()
{
    // do something....

    // PART 1 STARTS HERE
    if (some_condition_is_satified)
    {
        $.ajax({
            url: '@Url.Action("CheckData", "MyController")',            
            type: "POST",
            dataType: "JSON",
            beforeSend: function () {
                showLoading();
            },
            //Success will execute only if the ajax-request is finised
            success: function (result) {
                if (!result.isOk) {
                    return;
                }
                part2(); 
                part3();
            },
            complete: function(){
                hideLoading();
            }
        });
    }

    // PART 2 STARTS HERE
    function part2 () {/*do something.....*/}

    // PART 3 STARTS HERE
    function part3 () {/*$.ajax({...})*/}
}

---

Related Topics