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

Question

I have a JavaScript widget which provides standard extension points. One of them is the beforecreate function. It should return false to prevent an item from being created.

I've added an Ajax call into this function using jQuery:

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

But I want to prevent my widget from creating the item, so I should return false in the mother-function, not in the callback. Is there a way to perform a synchronous AJAX request using jQuery or any other in-browser API?

Answer 1

You can put the jQuery's Ajax setup in synchronous mode by calling

jQuery.ajaxSetup({async:false}); 

And then perform your Ajax calls using jQuery.get( ... );

Then just turning it on again once

jQuery.ajaxSetup({async:true}); 

I guess it works out the same thing as suggested by @Adam, but it might be helpful to someone that does want to reconfigure their jQuery.get() or jQuery.post() to the more elaborate jQuery.ajax() syntax.

Answer 2

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