Memory leak in EditableColumn

[aliadinov]

Hi,
Please see your demo DataGrid
http://x-editable.demopage.ru/index.php?r=site/widgets#EditableColumn
Clicking on pages 1,2,1,2,1,2.... cause browser to freeze. Only page reload helps, but it is ajax application...

Please, see if you can help!
Thx

[Bhoft]

Hi, i have noticed the same problem.
i have used the EditableColumn on my grid and do some ajax reload of the grid on every change, but after several changes through the editable columns or pagination with ajax the jquery get some "unresponsive script" warning.
I guess it has something to do how the "editable" columns events are registered to the links. and each ajax refresh registers the same event again and again, so after x-reloads the editable-click event is registered x times?

If I change the these links in the Editable.php file

   //wrap in anonymous function for live update
        if($this->liveTarget) {
            $script .= "\n $('body').on('ajaxUpdate.editable', function(e){ if(e.target.id == '".$this->liveTarget."') yiiEditable(); });";
            $script = "(function yiiEditable() {\n ".$script."\n}());";
        }

to the following
( i just added a console.log command)

   //wrap in anonymous function for live update
        if($this->liveTarget) {
            $script .= "\n $('body').on('ajaxUpdate.editable', function(e){ if(e.target.id == '".$this->liveTarget."') {console.log('event fired'); yiiEditable();} });";
            $script = "(function yiiEditable() {\n ".$script."\n}());";
        }

You will see in your js console that the event is fired twice after the 1st ajax request, 4 times for the 2nd ajax request, 8 times for the 3rd ajax request ...
So each ajax request (nonetheless of grid sort/pagination etc.) will trigger the "ajaxUpdate.editable" event
to attach of the editable elements and this is done several times (for each request multiplied * 2).
So after some ajax requests the amount is enormous which will produce the "unresponsive script" warning.

So far i have no clue how to fix this issue and would really be pleased if someone got a solution.

I only know that if i add a unbind before the binding i only get one event triggered.

        if($this->liveTarget) {
            $script .= "\n $('body').unbind('ajaxUpdate.editable'); \n";
            $script .= "\n $('body').on('ajaxUpdate.editable', function(e){ if(e.target.id == '".$this->liveTarget."') {console.log('event fired'); yiiEditable();} });";
            $script = "(function yiiEditable() {\n ".$script."\n}());";
        }

But then i cannot have multiple editable columns on a gridview. But this one column works flawlessly,
because its only added once after a ajax request.
I guess the re-attachment of the editable columns to the gridview has to be completely rewritten .

regards Horizons

[Bhoft]

On the clevertech YiiBooster they have found a fix for this problem.