CGridView sometimes ignores filter change after ajax update

[MonkeyMaster]

It happens when CGridView has both text field and dropdown filters.

1. Enter text and press ENTER - grid updates (eventType is now 'keydown')
2. Select an option - grid does not update! ('change' event is ignored because eventType is still set to 'keydown'. after that eventType is changed to '')
3. select another option - grid updates

So eventType must be reset after each grid ajax update.

My solution:

var data = $('#' + id).data();
if (event.type === 'keydown') {
    if (event.keyCode !== 13) {
        return; // only react to enter key
    } else {
        data.eventType = 'keydown';
    }
} else {
    // prevent processing for both keydown and change events
    if (data.eventType === 'keydown') {
        data.eventType = '';
        return;
    }
}

[manerMoniar]

I can't solve with this solution, shows "event is undefined" in console.

[spacefrog]

Hi, I had the very same problem with firefox. The problem comes from the keyCode property which is not used by all browsers. On firefox it will return 0 for most of the key. (see http://unixpapa.com/js/key.html)

A quick solution si to use something like :

 event.keyCode ? event.keyCode : event.charCode;

So I modified the jquery.yiigridview.js to something like this :

$(document).on('change.yiiGridView keydown.yiiGridView', settings.filterSelector, function (event) {
if (event.type === 'keydown') {
        if ((event.keyCode ? event.keyCode : event.charCode) !== 13) {
                return; // only react to enter key
        } else {
                eventType = 'keydown';
        }
} else {
        // prevent processing for both keydown and change events
        if (eventType === 'keydown') {
                eventType = '';
                return;
        }
}

[Teknologica]

This issue still exists and I just encountered it today. When adding extra fields to settings.filterSelector via the gridview options and calling change events on these after using a normal keydown (via enter key) on a normal gridview filter, the resulting change event is discarded until the next event.

[manerMoniar]

@spacefrog your solution partially works, only function when the text field loses the focus if i press ENTER the grid does not update.

My solution was initialize eventType to an empty string.

Something like this:

$(document).on('change.yiiGridView keydown.yiiGridView', settings.filterSelector, function (event) {
                                        eventType = '';
                    if (event.type === 'keydown') {
                                            if ((event.keyCode ? event.keyCode : event.charCode) !== 13) {
                            return; // only react to enter key
                        } else {
                            eventType = 'keydown';
                        }
                    } else {
                        // prevent processing for both keydown and change events
                        if (eventType === 'keydown') {
                            eventType = '';
                            return;
                        }
                    }
}

[Teknologica]

My personal solution involved staying away from the source file (yiiGridView.js) and exporting the gridview's filterSelector via a data-filter attribute in the htmlOptions and have all external widgets call a central Javascript class that would handle the same logic as the default yiiGridView keydown/change delegate.

Here's a very abridged snippet

filterSelector = $grid.data('filter');
payload = $(filterSelector).serialize();
$grid.yiiGridView('update', {data: payload});

[lourdas]

I have tested the patch created by sivir in their tree and works fine for me. This issue happens in Firefox 30, but not in Chrome 35 and MS IE 11, so it's partially a browser specific issue. The patch works for all browsers mentioned above (confirmed).

Will this be merged for version 1.1.16?