bootstrap tabs / inside is not updating => table on tabs will not show if reload with a other active tab

[JoCord]

tablesorter 2.26.6
jquery 2.2.3
bootstrap 3.3.6

my tables on two tabs will not show only if you reload the page with one of this tabs active.

Your answer on stackoverflow contains the following working source:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   
  $('.tab-pane.active').find('table').trigger('applyWidgets');  
   $(window).resize();  
});

which works fine.

With the new commit (84180c1) you want to fixed that, but as you wrote:

the inside table isn't updating

Screenshot:

[Mottie]

Hi @JoCord!

Strangely, I was just looking at this when you posted the issue.

I discovered that the problem is actually the resizable widget. The combination of scroller & resizable widgets are not currently compatible - see #866 (comment).

If you remove the resizable widget, the demo works as expected.

[JoCord]

Mottie,

My tablesorter config do not load/activate the "resizable" widget:

    $(document).ready(function () {
       $("#fsi_xpnet")
           .tablesorter({
             theme: "bootstrap",
             showProcessing   : true, 
             headerTemplate: '{content} {icon}',
             widthFixed: true,
             widgets: ["storage", "saveSort", "uitheme", "filter", "scroller"],
             widgetOptions: {
                filter_reset : 'button.reset',
                filter_hideFilters: false,
                filter_ignoreCase: true,
                filter_saveFilters: true,
                filter_cssFilter: "form-control",
                scroller_height: 578,
                scroller_upAfterSort: false,
                scroller_jumpToHeader: false,
             }
       });
}); 

But I use the jquery.tablesorter.combined.js:

<script type="text/javascript" src="[% request.uri_base %]/tablesorter/jquery.tablesorter.combined.js"></script>
<script type="text/javascript" src="[% request.uri_base %]/tablesorter/widget-scroller.js"></script>
<script type="text/javascript" src="[% request.uri_base %]/tablesorter/parser-input-select.js"></script>
<script type="text/javascript" src="[% request.uri_base %]/tablesorter/widget-grouping.js"></script>

Should I load the single files or what you mean with

remove the resizable widget

?

Regards
Jochen

[Mottie]

Oh, it's just that the demo was using the resizable widget when I noticed the inner table wasn't updating. If you run that demo without the resizable widget (in the widgets option), then the demos work as expected.

[JoCord]

Mottie,
but in the demo you have the workaround

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $('.tab-pane.active').find('table').trigger('applyWidgets');
        $(window).resize();
    });

included - is this in the new version also needed?

[Mottie]

Yes, that is still needed for the current release. Once the next release is available, the $(window).resize(); part of the code won't be necessary.

---

Update: This issue is fixed by 84180c1.

[JoCord]

Mottie,

perfect - new version works great!

Thank you & Regards
Jochen