How to Get Jquery to Perform a Synchronous, Rather Than Asynchronous, Ajax Request

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
    });
}

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;
}

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
});

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({...})*/}
}

jQuery ajax call synchronous vs asynchronous?

From what I understand, your question has nothing to do with Express or EJS. You want synchronous ajax in the browser, which is certainly possible. If you're using jQuery, you need to set the async property to false, as per this documentation:

http://api.jquery.com/jquery.ajax/

It is, however, not recommended to do that, as explained there.

Avoid Synchronous ajax request and show loading

Never use synchronous requests. Use the asynchronous pattern properly by using callbacks, something like this:

var $loadingIcon = $('#yourLoadingImage').show();
$.ajax({
  type: 'POST',
  url:  'get/employee/' + employee_id,
  dataType: "json", 
  success: function(employee) {
    $.each(employee, function(key, value) {
      $('form[name="form-edit-employee"]').find('input[name="' + key + '"]').val(value); 
    });
    $('#modal-edit-employee').modal('show');
    $loadingIcon.hide();
  }
})

What's a non-deprecated way of doing a synchronous ajax call using jQuery?

As AJAX call is asynchronous, you will always get blank object ({}) in response.

There are 2 approach.

You can do async:false
To get response returned in AJAX call try like below code. Which wait for response from server.


function getData(ID) {
  return $.ajax({
    url: 'script',
    method: 'POST',
    dataType: 'json',
    //async: true,  //default async call
    data: {action: 'get', id: ID },
    success: function(response) {
         //Data = response;
    })
  });
}

$.when(getData(YOUR_ID)).done(function(response){
    //access response data here
});