Organizational Research By

Surprising Reserch Topic

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


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 any way to perform a synchronized AJAX request using jQuery or any other API? Thanks


asked Apr 24, 2015 in jquery by rajesh
0 votes
62 views



Related Hot Questions

4 Answers

0 votes

From the Jquery docs: you specify the async 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
    });          
}
answered Apr 24, 2015 by rajesh
0 votes

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 might be helpful to someone that does want to reconfigure their jQuery.get() or jQuery.post() to the more elaborate jQuery.ajax() syntax

answered Apr 24, 2015 by rajesh
0 votes

Excellent solution! I noticed when I tried to implement it that if I returned a value in the success clause, it came back as undefined. I had to store it in a variable and return that variable. This is the method I came up with:

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}
answered Apr 24, 2015 by rajesh
0 votes

All of these answers miss the point that doing an AJAX call with async:false will cause the browser to hang until the AJAX request completes. Using a flow control library will solve this problem without hanging up the browser. Here is an example with Frame.js:

beforecreate: function(node,targetNode,type,to) { 

    Frame(function(next)){ 

        jQuery.get('http://example.com/catalog/create/', next);

    });
    Frame(function(next, response)){ 

        alert(response);
        next();

    });
    Frame.init();
}
answered Apr 24, 2015 by rajesh

...