#4906 closed bug (duplicate)

Opened October 12, 2009 01:58AM UTC

Closed October 26, 2010 05:26PM UTC

jQuery UI widgets leaks memory for dynamic content manipulation

Reported by: ericosta78 Owned by:
Priority: major Milestone: 1.9.0
Component: ui.datepicker Version: 1.7.2
Keywords: memory leak Cc:
Blocked by: Blocking:
Description

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.

Attachments (1)
  • ie6-memoryleak.html (2.3 KB) - added by tebulin November 18, 2009 11:17AM UTC.

    Automatic Demonstration of IE6 memory leakage (only subtle in testcase, but major in real life env)

Change History (4)

Changed October 17, 2009 05:28AM UTC by caphun comment:1

I can confirm this is happening. Here's a test page:

http://jsbin.com/ujixe

Changed November 11, 2009 09:14PM UTC by rdworth comment:2

component: ui.core → ui.datepicker
milestone: TBD → 1.8

See related ticket #4566

Changed November 18, 2009 11:16AM UTC by tebulin comment:3

I can confirm this issue and it's urgin me, too as we use it in a single-page dynamic ajax applications for IE6 and others.

The memory growth is really critical in the final application and subtle in the semi-automatic test case I'll attach to this issue.

Changed October 26, 2010 05:26PM UTC by scottgonzalez comment:4

resolution: → duplicate
status: new → closed

Duplicate of #4566.