How to get return value in a function with inside Ajax call - JQuery

Question

this may sound very easy to few of you, but i am not able to figure out why I am not able to get the return value, even after chceking many posts :(

function         


        

Answer 1

I agree with the first line by ahren that 'That's because the $.ajax() call is asynchronous.'

you could try adding a setting - async:false which is true by default. This makes the call synchronous.

you can edit your code as :

function getMessageCount() {
                var count;
                $.ajax({
                    type: "POST",
                    url: "http://localhost:43390" + "/services/DiscussionWidgetService.asmx/GetMessageCount",
                    dataType: "json",
                    async:false,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {                            
                        count = data.d;
                    } //success
                });
                return count;
            }

Answer 2

That's because the $.ajax() call is asynchronous.

If you edit your code to something like:

function getMessageCount(callback) {
    var count;
    $.ajax({
       type: "POST",
       url: "http://localhost:43390" + "/services/DiscussionWidgetService.asmx/GetMessageCount",
       dataType: "json",
       contentType: "application/json; charset=utf-8",
       success: function (data) {                            
         count = data.d;

         if(typeof callback === "function") callback(count);
      } //success
   });
}

Then when you call it:

getMessageCount(function(count){
  console.log(count);
});

Answer 3

use a callback:

call function like:

getMessageCount(function(result) {
//result is what you put in the callback. Count in your case
});

and the other like:

function getMessageCount(callback) {
    var count;
    $.ajax({
        type: "POST",
        url: "http://localhost:43390" + "/services/DiscussionWidgetService.asmx/GetMessageCount",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {                            
            count = data.d;
            if (callback) {
             callback(count);
            }
        } //success
    });

}

Answer 4

function ajax_call(url,data){
      return $.ajax({ type: "POST",
        url: url,
        data: data,
        async:false,
        success: function(status){
        }
    }).responseText;
}

Now you will get the response text from server side via ajax call

Answer 5

Why you don't just pass it to a function?

function getMessageCount() {
  var count;
  $.ajax({
    type: "POST",
    url: "http://localhost:43390" + "/services/DiscussionWidgetService.asmx/GetMessageCount",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {                            
       count = data.d;
       countMessages(count);

    } //success
   });
 }

function countMessages(counted) {var counted = counted; console.log(counted);}