Opened 10 years ago

Closed 9 years ago

#4906 closed bug (duplicate)

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 10 years ago.
Automatic Demonstration of IE6 memory leakage (only subtle in testcase, but major in real life env)

Download all attachments as: .zip

Change History (5)

comment:1 Changed 10 years ago by caphun

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

http://jsbin.com/ujixe

comment:2 Changed 10 years ago by rdworth

Component: ui.coreui.datepicker
Milestone: TBD1.8

See related ticket #4566

comment:3 Changed 10 years ago by tebulin

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 10 years ago by tebulin

Attachment: ie6-memoryleak.html added

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

comment:4 Changed 9 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #4566.

Note: See TracTickets for help on using tickets.