.NET AJAX Problem: Microsoft JScript runtime error

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

Problem Description

By invoking of the AJAX java-script following error appears:

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

 c

This error mostly occurs when:

- The AJAX call is invoked within AJAX-callback function and

- If in the handler function (callback function) uses a variable with the name ‘i’. This sound very strange but it is true.

Case I: AJAX invoke from AJAX callback

Following example illustrates this situation. The function doSomeAjaxCall invokes the remote AJAX-call to the server and expects the result in functions OnValidationSuccess and OnValidationError. If the next AJAX-call is invoked from any of specified callback-functions the described error will appear.

  // Used by AjaxValidator to initialte the callback to server.

        function doSomeAjaxCall(validatorInstance)

        {        

            WebForm_DoCallback('__Page', “someParam1”,                                                        OnValidationSuccess, “someParam2”, null, true)    

        }

        function OnValidationSuccess(newValue, imageInstance)

        {   

            // do something...

            //This causes the error

             WebForm_DoCallback('__Page', "", OnSecondCallSuccedded,

            "Update", null, true)  ;  

        }

        function OnSecondCallSuccedded (newValue, imageInstance)

        {

            // do something...

        }

Workaround

To solve this problem change the code as shown in the next example. Why this could be the right work-around solution?

The AJAX framework at the client side has a bug in the function WebForm_CallbackComplete(), Each time one callback-method is executed the AJAX calls this WebForm_CallbackComplete(), which is defined in one dynamically generated AXD-file. The AJAX by each call tracks all callback-functions registered as “have been invoked”. The list off all such (pending) functions is tracked in the list called ‘pendingCallbacks’ which is unfortunately not thread-safe.

Imagine, the first callback is invoked internally by the function WebForm_CallbackComplete().

In this moment the number of pending-callbacks is 1. When the second AJAX-call is invoked (WebForm_DoCallback) from the callback-function OnValidationSuccess the number of pending-callbacks is increased on 2.

Because the variable ‘i’ in the loop in the function (WebForm_CallbackComplete) is not the local one, successive AJAX-calls just change the value of the variable.

This code ensures that the renderSuccess -code is executed on the second thread an the value of variable ‘i’ is “private for thread” (In .NET known as ThreadStatic).

  // Used by AjaxValidator to initialte the callback to server.

        function doSomeAjaxCall(validatorInstance)

        {        

            WebForm_DoCallback('__Page', “someParam1”,                                                        OnValidationSuccess, “someParam2”, OnValidationError, true)    

        }

        function OnValidationSuccess(newValue, imageInstance)

        {   

            setTimeout(“renderSuccess(‘” + newValue + “’)”, 1);

        }

        function OnValidationError(newValue, imageInstance)

        {

        }

function renderSuccess(newValue)

{

            // Do something

            //This does not cause the error

             WebForm_DoCallback('__Page', "", OnUpdateSuccedded,

            "Update", OnUpdateError, true)  ;  

}

Case II: Using of variable -i- in the callback function

Assume you have following callback function, which is called from the AJAX framework on successful processing of some AJAX-invoke.

      function OnValidationSuccess(newValue, imageInstance)

        {   

            for(i = 0; i < 4; i++ )       

            {

                //Do anything

            }

        }

When this function is executed the error “Microsoft JScript runtime error: '__pendingCallbacks[...].async' is null or not an object” occures.

Thhe goot thin is that the work-around is very easy. Just use other name for variable. So, following code would work:

function OnValidationSuccess(newValue, imageInstance)

        {   

            for(n = 0; n < 4; n++ )       

            {

                //Do anything

            }

        }

The problem here is that the function WebForm_CallbackComplete contained in the generated AXD-file (see bellow) implements a loop over variable ‘i’. Because this variable is not locally declared it is a global one. So, if your code uses the variable use the global variable with the same name it will crash.

The another workaround would be to execute the function in OnValidationSuccess another thread.

Remarks:

Another workaround would be to execute the function OnValidationSuccess in another thread.

Dynamically generated AXD-code

function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {

    this.eventTarget = eventTarget;

    this.eventArgument = eventArgument;

    this.validation = validation;

    this.validationGroup = validationGroup;

    this.actionUrl = actionUrl;

    this.trackFocus = trackFocus;

    this.clientSubmit = clientSubmit;

}

function WebForm_DoPostBackWithOptions(options) {

    var validationResult = true;

    if (options.validation) {

        if (typeof(Page_ClientValidate) == 'function') {

            validationResult = Page_ClientValidate(options.validationGroup);

        }

    }

    if (validationResult) {

        if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {

            theForm.action = options.actionUrl;

        }

        if (options.trackFocus) {

            var lastFocus = theForm.elements["__LASTFOCUS"];

            if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {

                if (typeof(document.activeElement) == "undefined") {

. . .

To be continued...