Hello,
When an HTML element observed with the class Event, is destroyed by the Ajax.Updater, it causes a memory leak on this element at page unload (only with IE6).
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Memory leak test</title>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
</head>
<body>
<div id='ajaxdiv'>
<div id='observedDiv'>
I am observed!
</div>
</div>
<div id='launchAjax'>
Click here to Ajax Update!
</div>
</body>
<script type="text/javascript">
$('observedDiv').observe('click', function(){
alert('Clicked');
});
$('launchAjax').observe('click', function(){
new Ajax.Updater($('ajaxdiv'), 'file.html');
});
</script>
</html>
I fixed this issue by my side by overriding the function Event.observe(), which now builds a list of observed elements/events/handlers, then at each Ajax.Updater() call, I call Event.stopObserving() on each observed element that are children of the ajax container.
I am not a javascript expert but here is my solution if it can help (this solution is not so good because released elements are not removed from the list, I am sure that it could be done easily)
var EventCollector = {
observedEvents: [],
install: function(){
Event.oldObserve = Event.observe;
Event.observe = function(iElement, iEventName, iHandler) {
EventCollector.observedEvents.push(
{element:iElement, name:iEventName, handler:iHandler}
);
Event.oldObserve(iElement, iEventName, iHandler, arguments[3]);
};
},
cleanEvents: function(parent){
EventCollector.observedEvents.each(function(event){
if(Element.descendantOf(event.element, parent)){
Event.stopObserving(event.element, event.name, event.handler);
}
});
}
};
EventCollector.install();
EventCollector.cleanEvents() is called before each new Ajax.Updater(...).
