Memory leak

[ekalderon]

Editable grid has a memory leak when rendering a table. I tried to trace this down a little, and I think the problem is that _renderGrid (which creates the table) is called twice:

1) renderGrid -> _renderGrid 2).renderGrid -> setPageIndex -> refreshGrid -> _renderGrid

I suspect that there is already an event attached to the first table created which prevents it from being freed by the garbage collector when the 2nd table overwrites it.

I'm not sure if it's a good idea to create the table twice to begin with, but if it is necessary, need to remove the events or whatever is keeping the reference to it.

Since this is done internally in renderGrid, there is no way to bypass it from the outside by removing the table (i.e. $("#tableid").empty() ).

[ekalderon]

I've been looking into this more. While calling renderGrid twice makes the problem worse (leaks twice as much), it is not the cause of the problem. I've also eliminated the content of the table. But as soon as the table node is added to the document here: $(containerid).appendChild(table);

A reference attaches to it somewhere and never releases. I am still not able to locate the offending line or what kind of reference there is to that table element.

[ekalderon]

I reduced _renderGrid to this, and it still leaks:

    while (_$(containerid).hasChildNodes())
            _$(containerid).removeChild(_$(containerid).firstChild);
    this.table = document.createElement("table");
    this.table.id = tableid;
    _$(containerid).appendChild(this.table);

When I replace it with this jquery, it doesn't leak:

    $("#"+containerid).html('<table id="'+tableid+'" />');

I'm not a javascript expert, and this is as far as I know to go.

[ekalderon]

Can see the leak on the full demo using the pagination - change pages and see the memory usage continuously go up (even when going back and forth between the same two pages).

In the demo, there is a reference to the table (id=tableid) that is not freed, so after creating the new table for the new page, the old table remains in memory as orphaned.

[ekalderon]

replacing:

while ($(containerid).hasChildNodes()) $(containerid).removeChild(_$(containerid).firstChild);

with:

$(containerid).ondblclick = null; $(containerid).onclick = null; _$(containerid).innerHTML = "";

alleviates the problem. There's still a leak, but smaller. For some reason removeChild() does not remove all the references to the object, but innerHTML="" does. Clearing out the events is just to be on the safe side.