jQuery UI widgets leaks memory for dynamic content manipulation
jQuery UI widgets are causing memory leaks in browsers during dynamic
content manipulation. This would be a problem if the goal is develop
applications that want to behave like Gmail or Facebook where content
is updated in-page.
I have tested this using both Datepicker and Tabs widget and the
results are the same - leakage. After hours of simulation, I am able
to reproduce this memory leak effect in the exact sequence required.
To reproduce the leakage effect, here's an example:
<html>
<head>
<script language="javascript" type="text/javascript" src="http:/
localhost/js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http:/
localhost/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function($){
$('#button').click(function(){
$('#dates').html('<input id="date" type="text" value=""/>');
$('#date').datepicker();
});
});
</script>
</head>
<body>
<input id="button" type="button" value="Click me!"/>
<div id="content">
<div id="dates"></div>
</div>
</body>
</html>
Once the page is setup, clicking the "Click me!" button the first time
will not cause the memory leak, but clicking it a second time will
cause the memory leak. In sIEve, clicking on the Go button after the
"Click me!" button is clicked the second time will produce the memory
leak.
The leakage here is very subtle. When a content is first dynamically
loaded (via a click of a button for example) with a form element
initialized with a DatePicker? widget, no leakage will occur yet. But
when the content is dynamically loaded again a second time, replacing
the old one, a form element will be initialized with a new DatePicker?
widget, but the previous form element and DatePicker? widget will not
be removed properly; thus causing a leakage.
I hope the jQuery development team can look into this issue seriously
as this would prevent jQuery from being adopted in large scale
applications that use AJAX to manage dynamic content.
