Async Calls using ASP.NET 2.0 Client Callback won't work properly if the OnComplete function makes another Client Callback

Question

Ref: http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=270828&SiteID=1

If you make an asynchronous callback using ASP.NET 2.0 client callback and the OnComplete function you defined makes another callback then you will exeperience unwanted behavior. Here is how it gets started...

[code lang="javascript"]

Code Snippet

function StartFirstCallback() {
   // execute first callback. you get this script from Page.ClientScript.GetCallbackEventReference
   WebForm_DoCallback('__Page', "", OnFirstCallbackComplete, null, null, true);
}

function OntFirstCallbackComplete(result, context) {
  alert("First Callback Complete");
   // execute second callback. you get this script from Page.ClientScript.GetCallbackEventReference
   WebForm_DoCallback('__Page', "", OnSecondCallbackComplete, null, null, true);
}

function OnSecondCallbackComplete(result, context) {
  alert("Second Callback Complete");
}

 

[/code]

When you execute the StartFirstCallback function, you will see many alert winows showing "First Callback Complete" and "Second Callback Complete" messages. The reason for this lies in a minor bug in "WebForm_CallbackComplete" function of inbuilt ASP.NET function. Here is the function extracted using Reflector:

[code lang="javascript"]

Code Snippet

function WebForm_CallbackComplete() {
    for (i = 0; i < __pendingCallbacks.length; i++) {
        callbackObject = __pendingCallbacks[ i ];
        if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
            WebForm_ExecuteCallback(callbackObject);
            if (!__pendingCallbacks[ i ].async) {
                __synchronousCallBackIndex = -1;
            }
            __pendingCallbacks[ i ] = null;
            var callbackFrameID = "__CALLBACKFRAME" + i;
            var xmlRequestFrame = document.getElementById(callbackFrameID);
            if (xmlRequestFrame) {
                xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
            }
        }
    }
}

 

[/code]

The bug is due to the point at which the WebForm_ExecuteCallback function gets invoked. This function is responsible to invoke the OnComplete function. But the "__pendingCallbacks" "global" array is updated only after executing the OnComplete function. Note that "__pendingCallbacks" global array is also used inside "WebForm_DoCallback" function to add new requests. The following piece of code is extracted from WebForm_DoCallback function:

[code lang="javascript"]

Code Snippet

function WebForm_DoCallback(...) {
 ...
 ...
    var callback = new Object();
    callback.eventCallback = eventCallback;
    callback.context = context;
    callback.errorCallback = errorCallback;
    callback.async = useAsync;
    var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
 ...
 ...
}

 

[/code]

Here is what happens when the StartFirstCallback function is invoked for the first time:

1. WebForm_DoCallback is called
2. __pendingCallbacks is updated by adding this new request (from step 1). __pendingCallbacks.length = 1
3. Callback completes and WebForm_CallbackComplete is called.
4. [inside WebForm_CallbackComplete]: walks the __pendingCallbacks array (which has one element) and executes the OnComplete function viz. OnFirstCallbackComplete.
5. [inside OnFirstCallbackComplete]: "First Callback Complete" message is shown. Another async callback requested (OnComplete = OnSecondCallbackComplete)
5.1 [inside WebForm_DoCallback]: __pendingCallbacks is updated by adding this new request (from step 1). __pendingCallbacks.length = 2.

Now by the time __pendingCallbacks array is updated inside WebForm_CallbackComplete function at step 4, the async operation completes so quickly that WebForm_CallbackComplete is invoked again for second call (made at Step 5). Here the __pendingCallbacks has 2 elements and most importantly the 0th element is still available (because "__pendingCallbacks[ i ] = null" statement is still not executed for the very first call) which means the OnStartFirstCallbackComplete function is called again. This starts a kind of infinite calls and only delayed response can stop this.

FIX:
Fixing this requires just moving the WebForm_ExecuteCallback statement as the last statement in WebForm_CallbackComplete routine. This ensures that __pendingCallbacks global array is updated before the OnComplete function gets invoked. Here is the updated version.

[code lang="javascript"]

Code Snippet

function WebForm_CallbackComplete_SyncFixed() {
  // SyncFix: the original version uses "i" as global thereby resulting in javascript errors when "i" is used elsewhere in consuming pages
  for (var i = 0; i < __pendingCallbacks.length; i++) {
   callbackObject = __pendingCallbacks[ i ];
  if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
   // the callback should be executed after releasing all resources
   // associated with this request.
   // Originally if the callback gets executed here and the callback
   // routine makes another ASP.NET ajax request then the pending slots and
   // pending callbacks array gets messed up since the slot is not released
   // before the next ASP.NET request comes.
   // FIX: This statement has been moved below
   // WebForm_ExecuteCallback(callbackObject);
   if (!__pendingCallbacks[ i ].async) {
     __synchronousCallBackIndex = -1;
   }
   __pendingCallbacks[i] = null;

   var callbackFrameID = "__CALLBACKFRAME" + i;
   var xmlRequestFrame = document.getElementById(callbackFrameID);
   if (xmlRequestFrame) {
     xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
   }

   // SyncFix: the following statement has been moved down from above;
   WebForm_ExecuteCallback(callbackObject);
  }
 }
}

 

[/code]

 

Lastly, in order to make sure this function is called instead of original version, the following statement should be executed as startup script.

[code lang="javascript"]

Code Snippet

if (typeof (WebForm_CallbackComplete) == "function") {
  // set the original version with fixed version
  WebForm_CallbackComplete = WebForm_CallbackComplete_SyncFixed;
}

 

[/code]

Thanks to Reflector. Can you imagine living without it?

 

 

Answer 1

Good post except the ['i'] subscript for __pendingCallbacks was replaced by the 'idea' image everywhere in your post. I would also point out that you can get to this source code using the VS Script debugger in VS 2005. You can find it in the WebResource.axd file under the page using the callbacks in the Script Explorer tab.

Answer 2

This is most impresive fix I ever saw!!!

Tested, work. I hade 2 overlapping callbacks and this solved issue.

 

As already said, only to take care on copy-paste to put back indexer i instead of those 3 bulbs.

 

Awesome.

Answer 3

Thanks so much for the post. It really saved me! I just added the function to the script called in my startup and prior to calling WebForm_DoCallback added the "if (typeof..." statement. Thanks again!!

Answer 4

Hi guys!

I've implemented this function on my aspx page, but I get an error automatically when I want to save some data in my DB.

Here is the error :

"__pendingCallbacks is not defined"

I've got an input button which invoke the callback function. But, when the callback finish, javascript throw me this error...

I don't find anything about this on the web. So if you know how to resolve this, that would be great!

Here is the save button code (nothing magic):

function CallBackSave() {
        var arg = 'sa';
        var context = new Object();
        <%=RefClientFuncInitiatingCallBack %>
    }

And the sync function has not been modified.

Thx!

Answer 5

My guess is that you probably missed indexer somewhere:

Code Snippet

__pendingCallbacks[i]

 

 

instead, you probably put just:

Code Snippet

__pendingCallbacks

 

 

Answer 6

Hi Badri,

Its a very helpful post. It solved few issues on my website that I was not able to figure out and there were no javascript error messages for help.

Thanks again for such a helpful solution.

MG

Answer 7

Badri,

This post is fantastic and solved a problem that I've been having for quite a while.  My specific instance was especially weird - I was only calling CallServer a second time if the user clicked 'Yes' on a javascript confirm message.  But the behaviour until I found your fix was the opposite, the code behind was only initiated if the user clicked 'Cancel' on the confirm message - if the user clicked 'Yes', the infinite loop became obvious. 

Thank you very much for taking the time to post this - I dropped it into my aspx page and it worked straight away :)