Solutions to the “jQuery.data() + UpdatePanel” memory leak problem

Posted on January 21, 2009. Filed under: JavaScript, jQuery, Software Development |

In my previous post, I described a memory leak problem when using jQuery.data() with ASP.NET Ajax UpdatePanel.

It would not be fair to say it is a problem with jQuery or Microsoft ASP.NET Ajax because both are designed independent of each other. So which party would be in the proper position to modify its code in order to solve the problem?

Update ASP.NET Ajax script – Method 1

After analyzing the script files of ASP.NET Ajax, I found it straight forward to add a small piece of code in MicrosoftAjaxWebForms.js to solve the problem:

Original:

updatePanelElement.innerHTML = rendering;

Updated:

if (jQuery) {
  jQuery(updatePanelElement).empty();
}
updatePanelElement.innerHTML = rendering;

But MicrosoftAjaxWebForms.js is a resource embedded in the ASP.NET Ajax library, how do we modify its code?

We can download the Microsoft Ajax library package, modify the code inside, and instruct our ASPX to use the external script files instead of the embedded ones. The following MS article describes the details of a similar process, except that you should modify MicrosoftAjaxWebForms.js and MicrosoftAjaxWebForms.debug.js (according to the code snippet above) instead:

http://support.microsoft.com/kb/936993

Update ASP.NET Ajax script – Method 2

If you do not prefer to modify the files that came with the MS Ajax package, you can also override its implementation by following the procedures below.

1. Save the following code as MicrosoftAjaxWebFormsJQueryUpdate.js:

jQuery(function(){
    if (Sys && Sys.WebForms && !Sys.WebForms.PageRequestManager.jQueryDestroyTreeOverriden) {
        Sys.WebForms.PageRequestManager.jQueryDestroyTreeOverriden = true;
        var oldFn = Sys.WebForms.PageRequestManager.prototype._destroyTree;
        var depth = 0;
        Sys.WebForms.PageRequestManager.prototype._destroyTree = function(element) {
            depth++;
            oldFn.apply(this, [element]);
            if (--depth == 0) {
                jQuery(element).empty();
            }
        }
    }
});

2. In your ASPX, include the above JS after including the jQuery script:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="MicrosoftAjaxWebFormsJQueryUpdate.js"></script>

Update jQuery?

Although updating ASP.NET Ajax script will solve the problem, I think it will also be worthwhile for jQuery to provide a ‘garbage collection’ method to cleanup any data/events that are associated with HTML elements that do not exist anymore. This will be useful if developers are using other scripts/tools that are having the same problem, but the script source is not readily available for update.

This, however, is not as trivial as updating ASP.NET Ajax script. It’s better to leave to the jQuery team to consider.


Read Full Post | Make a Comment ( 1 so far )

Recently on Malnotna's Blog…

jQuery.data() + UpdatePanel = Memory Leak

Posted on January 20, 2009. Filed under: JavaScript, jQuery, Software Development | Tags: , |

A jQuery trap to avoid

Posted on January 16, 2009. Filed under: JavaScript, jQuery, Software Development |

jQuery.Modularize

Posted on January 14, 2009. Filed under: JavaScript, jQuery, Software Development |

jQuery.space

Posted on January 14, 2009. Filed under: JavaScript, jQuery, Software Development |

jQuery.Namespace

Posted on January 13, 2009. Filed under: JavaScript, jQuery, Software Development |

jQuery namespace support?

Posted on January 12, 2009. Filed under: JavaScript, jQuery, Software Development |

First encounter with jQuery

Posted on January 11, 2009. Filed under: JavaScript, jQuery, Software Development |

Liked it here?
Why not try sites on the blogroll...

Follow

Get every new post delivered to your Inbox.