Highlight search in Responsive child rows when screen is resized

silkspin

I've put together a test case to illustrate what I mean... http://live.datatables.net/vupekoko/1/edit

Using the search string "London" as an example...

• Start with the screen wide enough to fit all rows so responsive isn't activated. "London" is highlighted.
• Shrink the screen size by dragging until the "London" column disappears.
• Open the child row and "London" has a highlighted background because of row.child().highlight($(table.search().split(/\s+/)));
• Expand the window again until "London" appears in the main row again (still highlighted), but when the screen is shrunk again it disappears.
• Some other code in the example highlights already open child rows. Open another row and delete the "n" from "London" and the highlight will appear again.

The filter is still applied through all of the resizing, but what I want to know is how to keep the highlighted text all of the time. I've tried to solve it by adding code to the draw event but it didn't work. I don't think I'm too far away from a fix.

allan

In the update condition of your display function, you'll need to call your highlight function in there again, since Responsive will redraw the child row on each resize.

Allan

silkspin

Thanks @allan. I did try that yesterday, but I was getting errors and the screen was freezing. I've just updated the test and indeed it does work, but if I open the Dev Tools console and start resizing the screen back to the original pre-responsive size I get TypeError: undefined is not an object (evaluating 'row.child().highlight'). I know in real world usage this might not be a problem because users aren't going to be doing this very often. but it still leaves the potential for it to stop working.

In Chrome all of the screen freezes, but Safari seems to report errors in the Dev Tools console and carry on functioning. Is this something I've not implemented correctly?

colin

Could you update your test case with those changes you described, please, that way we can take a look.

Colin

silkspin

Hi @colin. I had already updated the test case. http://live.datatables.net/vupekoko/1/edit

It now includes row.child().highlight($(table.search().split(/\s+/))); twice. The top one fixes the original issue, but then causes the errors when resizing the window back to full size.

          if (update) {
            if ($(row.node()).hasClass('parent')) {
              row.child(render(), 'child').show();
// THE FOLLOWING LINE CAUSES THE ERROR WHEN RESIZING BACK TO FULL SCREEN
              row.child().highlight($(table.search().split(/\s+/)));

              $('div.slider', row.child()).slideDown(0);
              return true;
            }
          } else {
            if (!row.child.isShown()) {
              row.child(render(), 'child').show();
              $(row.node()).addClass('parent shown');
              $('div.slider', row.child()).slideDown();
              // highlight search in child row as it is opened
              row.child().highlight($(table.search().split(/\s+/)));
              return true;
            } else {
              $('div.slider', row.child()).slideUp(function() {
                row.child(false);
                $(row.node()).removeClass('parent shown');
              });

              return false;
            }
          }

allan

Thanks for the link, but unless I'm doing something wrong, I'm not seeing an error there I'm afraid:

Smaller:

And larger:

And even larger:

Have I missed something?

Allan

silkspin

Hi @allan. It's a problem that shows in the Dev Tools console. In Safari it shows the error but still functions correctly.

In Chrome I filter, then shrink the window and open the child row. When I go back to full complete rows again the screen freezes. This screenshot shows how the window is stuck even when I'm still resizing. I've used the same highlight function call in 2 places in update, but only the 2nd one doesn't throw errors. Is my syntax wrong?

kthorngren

Seems like its a race condition but not sure what the solution is. I can recreate the error message, in Mac Chrome, by quickly resizing the output tab to hide then show the Office column. I tried using setTimeout to delay the row.child().highlight($(table.search().split(/\s+/))); call but that didn't seem to help.

Kevin

silkspin

Thanks for looking Kevin. The combination of searching, opening child rows and resizing screens like this isn't something likely to be repeated by many people I just wanted to make sure I wasn't doing anything wrong to cause it.

It would be nice if worked, but it obviously looks like a hard bug to pin down and fix. It isn't a problem with rapidly resizing the window, because it only freezes once it goes back to full width when the child rows are hidden.

silkspin

@kthorngren here is your suggestion from the other thread where you suggested it might fix this problem, which it does.

This test case approaches the highlighting function differently, and successfully.

http://live.datatables.net/lopazegi/1/edit

allan

I think I see the issue (certainly I got the same error message, although oddly, never in Firefox).

This line:

$('div.slider', row.child()).slideDown();

Is effectively async since it can trigger an animation. So it appears that the row.child() call might not have any data available when it is run under certain conditions.

A simple conditional check resolves that:

              let child = row.child();
              if (child) {
                child.highlight($(table.search().split(/\s+/)));
              }

http://live.datatables.net/vupekoko/3/edit

Allan

silkspin

Hi @allan. You put the conditional in the place of the 2nd instance of row.child().highlight($(table.search().split(/\s+/))); which wasn't causing the error. When I tried testing I still got the error. So, I used your code to replace the 1st instance and that solved it. Thanks for looking into this further. I now have 2 options to choose from!

http://live.datatables.net/vupekoko/4/edit