Geek Answers Handbook

Running the next line after code completion in Ajax in jQuery

Need help!

I am making an ajax call inside a function. The result of an 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 receiving the result from the ajax call to the web service. But instead, it returns before making an ajax call. Could you help me?

+4
source share
4 answers

Remember that by default, your ajax request is not a synchronous call, so the function will immediately return without waiting for a response. One option that I would highly recommend is to use the asynch:false parameter.

The best option is to reorganize the structure of your code and pass in a callback that will be called upon successful completion

eg

  //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 }
+8
source

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

async Boolean Default value: true By default, all requests are sent asynchronously (i.e., by default, this value is true). If you need synchronous requests, set this parameter to false. Please note that synchronous requests can temporarily block the browser, disabling any actions while the request is active.

As redsquare noted, it's probably better to refactor than using this option. It depends on your specific needs, of course ...

0
source

Since the request is executed in asynchronous mode (and you really do not want to do this in synchronous mode, since it freezes the browser during the whole time of the request), you have absolutely no way to know when the request will be completed:

Run the query with

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

But the request runs in the background and is not completed when you reach “here”.

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

Instead of just putting msg.d in nUnratedCount , this function really should work with it (for example, displaying it in an HTML document or whatever you want to do with this piece of data)

0
source

Ajax calls are asynchronous calls, your call is made, but the next command is interpreted without waiting for the call to return.

To make a synchronous call, you need to set the "async" variable to "false", so the code stops waiting for the result of the call.

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

More articles:


All Articles