Executing next line after completion of code in Ajax in Jquery

Question

Need Help!

I am executing an ajax call inside a function. The result from the Ajax call is the return value of the function.

The code is as follows:

function tabstrip()
 {       
        $.ajax({
                  type: "POST",
                  url: "/WebService/MessageUnratedCount.asmx/GetMessageUnratedCount",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(msg) {
                    nUnratedCount=msg.d;               

                  }
              });
           return nUnratedCount;                                       
 }

The nUnratedCount value should be returned after its result is obtained from the ajax call to a web service. But instead its getting returned before the execution of the ajax call. Can you please help?

Answer 1

I believe the ajax call is asynchronous by default. From the jquery docs:

async Boolean Default: true By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

As noted by redsquare, it's probably better to refactor than actually using this option. This depends on your specific requirements of course...

Answer 2

Remember that by default your ajax request is not a synchronous call therefore the function will return straight away without waiting for the response. One option that I would strongly advise against is using asynch:false setting.

The best option is to refactor the structure of your code and pass in a callback which will be invoked on success

e.g

   //calling code
   tabstrip( yourCallbackFunction )

    function tabstrip(callbackFn)
     {       
            $.ajax({
                      type: "POST",
                      url: "/WebService/MessageUnratedCount.asmx/GetMessageUnratedCount",
                      data: "{}",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: callbackFn
                  });                                     
     }

    function yourCallbackFunction (data){
       //do something
    }

Answer 3

As the request is done in asynchronous mode (and you really don't want to do it in synchronous mode, as it freezes the browser for the whole duration of the request), you absolutly have no way to know when the request is finished :

You start the request with

$.ajax({
    ...
});
// "here"

But the request is done in background, and is not finished when you reach "here".

To be able to work with the "return value" of the Ajax request, you must do all of your work inside the function plugged on the success (or complete, or any event you want) event.

Instead of just putting msg.d into nUnratedCount, this function really has to work with it (for instance, displaying it in the HTML document, or whatever you were willing to do with that piece of data)

Answer 4

Ajax calls are asyncronous calls, your call is executed but next instruction is interpreted without waiting the return of the call.

You need to set "async" variable to "false" to perform the syncrounous call, so code stops execution while waiting for the call result.

http://docs.jquery.com/Ajax/jQuery.ajax#options

Try adding this:

function tabstrip()
 {       
        $.ajax({
          async: "false"
        });

        $.ajax({
                  type: "POST",
                  url: "/WebService/MessageUnratedCount.asmx/GetMessageUnratedCount",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(msg) {
                    nUnratedCount=msg.d;               

                  }
              });

        $.ajax({
           async: "true"
        });

        return nUnratedCount;                                       
 }