Fixing "Microsoft JScript runtime error: '__pendingCallbacks[...].async' is null or not an object"

Introduction

I recently hit a runtime error bug recently while using ASP.Net callback components.

There is a bug in the Microsoft ASP.Net standard library.

Fixing the bug is rather complicated because you have to change source code you don't have access to.

I could not find a complete step by step article on how to fix the error, this is why I decided to post the entire code.

Background

When running a page I would hit an error : "Microsoft JScript runtime error: '__pendingCallbacks[...].async' is null or not an object"

The error occurs on this line.

// ORIGINAL CODE FROM MICROSOFT 
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);
            }
        }
    }
} 

The Problem

It seems that the error is in the for (i=0; is the core of the problem. The i variable is a global variable and it can get changed within the loop.

The fix is to to add a var keyword to make the variable local.
Looking on the internet you can find that some people suggest also to move the WebForm_ExecuteCallback lower in the loop.

The Fix

<script type="text/javascript">
//<![CDATA[
var GlvDelayedNextPageNo;

function WebForm_CallbackComplete_SyncFixed() {
     // the var statement ensure the variable is not global
     for (var i = 0; i < __pendingCallbacks.length; i++) {
        qcallbackObject = __pendingCallbacks[i];
        if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
            // SyncFixed: line move 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);
            }
            // SyncFixed: the following statement has been moved down from above;
            WebForm_ExecuteCallback(callbackObject);
        }
    }
}

var OnloadWithoutSyncFixed = window.onload;

window.onload = function Onload(){
    if (typeof (WebForm_CallbackComplete) == "function") {
        // Set the fixed version
        WebForm_CallbackComplete = WebForm_CallbackComplete_SyncFixed;
        // CallTheOriginal OnLoad
        if (OnloadWithoutSyncFixed!=null) OnloadWithoutSyncFixed();
    }
}
//]]>
</script> 

Points of Interest

This was because while overloading the onload function you could change the behaviour of the rest of your components.

The right method is to overrides the onload but within the new onload call the previous one.

This is not rocket science, but also probably not obvious for everyone.