BootstrapTable.prototype.onColumnSearch makes 3 requests

[ghost]

Hi,

Using bootstrap-table-filter-control.js, on server side, 3 requests were sent to server.

Thanks.

[dabros]

@Pilb - more detail please

Ideally include all relevant header and response info from each, or at least url and summary of it so we see what they were

Also please include copy of your html and js related to this plugin

thanks

[ghost]

Please find example here : https://jsfiddle.net/gr24ouqo/4/.

Try to enter text into column filter and you will see 3 requests on network.

BootstrapTable.prototype.onColumnSearch = function (event) {
        copyValues(this);
        var text = $.trim($(event.currentTarget).val());
        var $field = $(event.currentTarget).parent().parent().parent().data('field')

        if ($.isEmptyObject(this.filterColumnsPartial)) {
            this.filterColumnsPartial = {};
        }
        if (text) {
            this.filterColumnsPartial[$field] = text;
        } else {
            delete this.filterColumnsPartial[$field];
        }

        this.options.pageNumber = 1;
        this.onSearch(event); // First Request
        this.updatePagination(); // Second Request
        this.trigger('column-search', $field, text); // Third Request
    };

Thanks,

Pilb

[dabros]

Not much time to look atm, but here is what i found

EDIT i first thought appears to make as many (duplicate) requests as there are columns, even if filter attribute not set on some, as i saw 2 requests only appear after disabling one field, but then saw 3 requests appear again each time later...

Here is updated fiddle: https://jsfiddle.net/dabros/gr24ouqo/5/

I also included https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/filter-control/bootstrap-table-filter-control.js inline ('in header no-wrap' option selected) so changes can be quickly modded, though better to fork repo and point to that if you plan on pull request though.

This appears to be where the handlers are added:

if (addedFilterControl) {
            header.off('keyup', 'input').on('keyup', 'input', function (event) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {
                    that.onColumnSearch(event);
                }, that.options.searchTimeOut);
            });

            header.off('change', 'select').on('change', 'select', function (event) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {
                    that.onColumnSearch(event);
                }, that.options.searchTimeOut);
            });

            header.off('mouseup', 'input').on('mouseup', 'input', function (event) {
                var $input = $(this),
                oldValue = $input.val();

                if (oldValue === "") {
                    return;
                }

                setTimeout(function(){
                    var newValue = $input.val();

                    if (newValue === "") {
                        clearTimeout(timeoutId);
                        timeoutId = setTimeout(function () {
                            that.onColumnSearch(event);
                        }, that.options.searchTimeOut);
                    }
                }, 1);
            });

            if (header.find('.date-filter-control').length > 0) {
                $.each(that.columns, function (i, column) {
                    if (column.filterControl !== undefined && column.filterControl.toLowerCase() === 'datepicker') {
                        header.find('.date-filter-control.' + column.field).datepicker(column.filterDatepickerOptions)
                            .on('changeDate', function (e) {
                                //Fired the keyup event
                                $(e.currentTarget).keyup();
                            });
                    }
                });
            }
        } else {
            header.find('.filterControl').hide();
        }
    };

But that doesnt strike me as wrong at all, so problem prob elsewhere in filter-control code.

@djhvscf might know more, but i cant see anything jumping out at me - next question is can we confirm this relates only to filter-control, and not quirk of base code that either always there or triggered by filter-control interacting like this???

[dabros]

mayble related: #1501

[javieralfaya]

Hi Dennis,
You have closed this issue and related issue 1501. It has created a patch for this problem?.
Best regards.

[djhvscf]

Until now this issue is opened because we don't have any patch for it.. If you have one please open a new PR @javieralfaya

[javieralfaya]

Hi Dennis, this is may patch:

Table filter control when pagination on server submit response twice, i commented this.update Pagination(); into bootstrap-table-filter-control.js and problem is resolved:

BootstrapTable.prototype.onColumnSearch = function (event) {
copyValues(this);
var text = $.trim($(event.currentTarget).val());
var $field = $(event.currentTarget).parent().parent().parent().data('field')

if ($.isEmptyObject(this.filterColumnsPartial)) {
    this.filterColumnsPartial = {};
}
if (text) {
    this.filterColumnsPartial[$field] = text;
} else {
    delete this.filterColumnsPartial[$field];
}

this.options.pageNumber = 1;
this.onSearch(event);

//this.updatePagination();
this.trigger('column-search', $field, text);

};

[djhvscf]

Great! Then open a new PR please, @javieralfaya

[dabros]

@javieralfaya - PR are always welcome

https://github.com/wenzhixin/bootstrap-table/blob/master/CONTRIBUTING.md

[mek-omkar]

still facing this problem. i am using 1.10.1

[wenzhixin]

Please update to 1.11.0

[jmm13]

Still does it in version: 1.12.1