select2 add new row

I am trying to add new row to the table with select2 filter. If you click "Add Row" the tbody will become blank until filter reset button is hit. Please see https://jsfiddle.net/igorsf/f69jte28/

@performiture

Hi @performiture!

It looks like it's an issue with the encoding of filters for storage. I'll have this problem fixed shortly.

@Mottie

Hi @Mottie,

Thanks for fixing this.. I think I found another issue related to this. When I set select2 filter on the last column all rows will be filtered. Here is demo https://jsfiddle.net/igorsf/fynwfryk/2/ If you try to select a city column 5 you will not get results but if you try column 1 it works fine.

Filter: Select2 now adheres to case sensitivity setting. See #1237

Actually it wasn't related; but a fix is now available for the select2 filter formatter in the master branch.

Updated demo

Thanks for such a quick turnaround!

Well, I try 😦... someday I'll work on an update for the select2 filter formatter so it supports version 4+.

Could you take a look at $('table').trigger("updateAll") event with of select2 filter formatter. In this example I am trying to change the filter_function on click but get an error widget-filter-formatter-select2.js:57 Uncaught TypeError: v.replace is not a function` Here is example https://jsfiddle.net/igorsf/pze42rhw/1/ If you click on "Change Filter" you will see this error.

Filter: Select2 update after filter row rebuilt. See #1237

The issue there was that the select2 file was still targeting a DOM node that was removed. So now it adds a class name to the cell and targets that instead. There was also an issue, which was fixed, that popped up in the widget-filter.js file which only occurred after an "updateAll".

Anyway, I wouldn't recommend using "updateAll" because it is meant to update the table after content in the thead and tbody are modified - like adding or removing a column; and it still causes issues with some widgets.

The best method to update the filter widget would be to use the refreshWidgets method.

$('table').trigger("refreshWidgets", [true]);

Here is an updated demo which is using an updated widget-filter.js. I usually only update the jquery.tablesorter.widgets.js file with each release.

Well, it's a circular problem... I have now traced the last issue to the filter widget when it binds the sticky header clone filter inputs. It's all very frustrating and time consuming. I decided not to hold off on the release I planned for this weekend. I'll continue to isolate the problem as I find time/motivation.

Mottie, your demo (without sticky headers) works great if ajax takes longer to complete than tablesorter filterInit. When I tried it with real ajax call, it completed before savedFilters got initialized causing lastSearch to be overwritten with empty array. To reproduce this you can just lower the timeout to 30ms or so from 3 sec. Is there some way I can ensure the order of events here?

Well, there have been some issues with race-conditions. This situation is another such case. The filter widget does wait until tablesorter has completed initialization before applying the saved search query. Triggering an "update" before the filter widget completes initialization does interfere with that sequence.

Moving the code to store the saved filters to the intialized callback function, appears to be a more reliable method, but now the select2 input isn't updating as expected: https://jsfiddle.net/fy9y6x7p/5/

I kind of made it work by timing the duration of ajax call and setting a minimum required timeout before calling update.

const DELAY = 1000
var ajaxStart = new Date().getTime();

$.ajax({
   success: function(json) {
        // rows are added here
        var ajaxDuration = new Date().getTime() - ajaxStart;                        
        var timeout = 0;
        if (ajaxDuration < DELAY) {
             timeout = DELAY - ajaxDuration;
        }

        setTimeout(function() {
        $('table')
          .data('lastSearch', savedFilters)
          .trigger("update");
        }, timeout);

but now select2 input is updating only if another filter is set. The filter widget search shows "Starting filter widget search:" with all list of empty strings. If another filter is set both show up in filter widget search just fine.

You may not need the setTimeout if you add that ajax call to the initialized callback function.

The problem with moving ajax call to initialized is as you pointed out earlier select2 input not updating as expected: https://jsfiddle.net/igorsf/fy9y6x7p/7/

Filter: Add delay to "filterFormatterUpdate". See #1237

Ok, I think I got it mostly fixed now... I needed to add a slight delay before updating the filter formatter functions.

So now this demo works, and it even works when the stickyHeaders widget is included; but the select2 within the sticky header isn't updated LOL.... one step at a time.

I noticed you are setting but not using savedFilters variable in the demo. It works but as soon as I add timeout to simulate ajax request, it breaks on refresh. select2 input doesn't get set
demo

Oops, I should have fixed that... try this demo.

It now works perfectly with "select2" input. However in my app, 1 out of 4 refreshes, the columns with "filter-select" class are loosing their selected values. I tried debugging it. When update is triggered and getFilters function in widget-filter.js is called, it has the right filters in $( table ).data( 'lastSearch' ) but after the function ends it returns filters variable which is missing those "filter-select" columns.

If the select2 input isn't updating, try triggering a filterFomatterUpdate event on the table. The setTimeout I recently added is set to 100ms, maybe it needs more time.

select2 is updating just fine. Its the other filters like <th class="filter-select" data-placeholder="Select a name">First Name</th> which sometimes resetting on refresh

I can't duplicate that problem. Please modify this demo to show me the problem so I can troubleshoot it better.

Navigation Menu

Repository navigation

select2 add new row #1237

13 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

select2 add new row #1237

Description

Activity

Mottie commented on Jun 28, 2016

performiture commented on Jun 28, 2016

Mottie commented on Jun 28, 2016

Mottie commented on Jun 28, 2016

performiture commented on Jun 28, 2016

Mottie commented on Jun 28, 2016

performiture commented on Jun 29, 2016

Mottie commented on Jun 29, 2016

13 remaining items

Mottie commented on Aug 1, 2016

performiture commented on Aug 8, 2016

Mottie commented on Aug 8, 2016

performiture commented on Aug 9, 2016

Mottie commented on Aug 9, 2016

performiture commented on Aug 9, 2016

Mottie commented on Aug 9, 2016

performiture commented on Aug 9, 2016

Mottie commented on Aug 9, 2016

performiture commented on Aug 11, 2016

Mottie commented on Aug 11, 2016

performiture commented on Aug 11, 2016

Mottie commented on Aug 11, 2016

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions