Widget classes don't apply to part of table #224

Exinaus · 2013-02-04T09:34:20Z

Hi, I'm using tablesorter in combination with jQuery tabs, and some of them loaded via jQuery ajax.
All the tables on page, placed in different tabs. And tables, that loaded in tab with jQuery ajax, don't loading correctly.

Here is the example screen, of page with that bug: http://www.diigo.com/item/image/3mh9g/kbxq
Here is screen of page code, made with Firebug: http://www.diigo.com/item/image/3mh9g/dp8t
Main table, and all rows in thead have required css classes, tbody>td doesn't have any css class.
If i sort this table, all classes appears, but how to make them appear in default state?

If you need source code of pages, here they are:
Main page, with tabs:

<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Content via Ajax</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script type="text/javascript" src="./js/jquery.metadata.js"></script>
    <script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="./js/jquery.tablesorter.widgets.js"></script>
<script>
$(document).ready(function() {

      $.extend($.tablesorter.defaults, {
          headerTemplate : '<div style="padding: 0px; padding-right:12px;">{content}</div>{icon}',
          widgets : ['uitheme', 'zebra'],
          widthFixed : false,
          sortList : [[0,0]],
          theme : 'jui'
        });

      $.extend($.tablesorter.themes.jui, {
          table      : 'ui-widget ui-widget-content ui-corner-all table-borders', // table classes
          header     : 'ui-widget-header ui-corner-all ui-state-default', // header classes
          footerRow  : 'ui-corner-all',
          footerCells: 'ui-widget-header ui-corner-all ui-state-default',
          icons      : 'ui-icon', // icon class added to the <i> in the header
          sortNone   : 'ui-icon-carat-2-n-s',
          sortAsc    : 'ui-icon-carat-1-n',
          sortDesc   : 'ui-icon-carat-1-s',
          active     : 'ui-state-active', // applied when column is sorted
          hover      : 'ui-state-hover',  // hover class
          filterRow  : '',
          even       : 'ui-widget-content', // even row zebra striping
          odd        : 'ui-priority-secondary'   // even row zebra striping
      });
      $.ajax({
          cache: true,
          type: "POST",
          url: "./ajax/testtable.php",
          success: function(msg){
              $("#activity_result").html(msg);
              $("#activity_table").tablesorter();
          }
      });

      $( "#tabs" ).tabs();

});
    </script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>
<div id="tabs-2">
<div id="activity_result"></div>
</div>
</div>
</body>
</html>

File included via ajax, testtable.php:

<table id="activity_table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>

Mottie · 2013-02-04T14:02:30Z

I think you might be missing the theme.jui.css file. Add this to the head of your document:

<link rel="stylesheet" href="./css/theme.jui.css" />

Also, since it doesn't look like you're using it, the jquery.metadata.js file isn't required.

Exinaus · 2013-02-04T14:48:10Z

Main page that i posted it's a compilation of code from a another script, where i use metadata. I posted that code compilation coz with it i still can reproduce the bug, so i thought that will be enough, to show what kind of bug i'm met.
Here are examples from that script, with working zebra:
http://www.diigo.com/item/image/3mh9g/a740
Same script, another tab, loaded with ajax, header are fine, the get css classes like supposed, but no zebra:
http://www.diigo.com/item/image/3mh9g/t394

Here i added theme.jui.css (i made a screen wil all included css files) to a sample code, listed above, still no zebra:
http://www.diigo.com/item/image/3mh9g/p7ym
And any tr tag still missing any class, that supposed to be there:
http://www.diigo.com/item/image/3mh9g/x8ti

If i click on any header, to sort table differently, all classes will be applied, like they supposed to be:
http://www.diigo.com/item/image/3mh9g/5uah

also, if i remove

$( "#tabs" ).tabs();

and tabs not gonna be created, table will be load like supposed to be, with all classes, and zebra widget:
http://www.diigo.com/item/image/3mh9g/3x8h

Based on that i still think that this is a bug.
Mb it's a jQuery UI bug, not a Tablesorter?

Mottie · 2013-02-04T15:17:45Z

Hmm, that is very odd... I don't have time today to make a demo to test this situation, but I wonder what would happen if you added a method to update the widgets after initialization:

$("#activity_table").tablesorter().trigger('applyWidgets');

You shouldn't need to do that, but I wonder if there is some memory leak or something with the tab contents being replaced. Have you tried jQuery 1.9 yet?

Exinaus · 2013-02-04T15:49:20Z

I updated it for test:

<script src="http://code.jquery.com/jquery-1.9.0.js">

And result still:
http://www.diigo.com/item/image/3mh9g/kdqi

I underlined two places. One, your code, second non-standard class applied to a table. I added this class in extending tablesorter theme defaults:

      $.extend($.tablesorter.themes.jui, {
          table      : 'ui-widget ui-widget-content ui-corner-all table-borders',

and table rescieve this class as it should be. All rows in tbody - still no classes by default. They appear only after sorting.

Exinaus · 2013-02-04T15:52:43Z

Oops, i think i made mistake, by applying .tablesorter() two times.
Now, only one time: http://www.diigo.com/item/image/3mh9g/6dtk

Mottie · 2013-02-04T16:56:26Z

Oh, I know!

It's because the zebra widget only applies to visible rows, and the table isn't visible until you click on that tab. So, add this to your tabs function:

$( "#tabs" ).tabs({
  activate: function( event, ui ) {
    ui.newPanel.find("#activity_table").trigger('applyWidgets');
  }
});

Exinaus · 2013-02-04T18:08:30Z

Thanks. A lot.
Now all works great.

Mottie · 2013-02-04T22:39:57Z

You're welcome! :)

Mottie closed this as completed Feb 4, 2013

Mottie mentioned this issue Feb 21, 2013

tigger('update') even w/resort is not updating zebra #243

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Widget classes don't apply to part of table #224

Widget classes don't apply to part of table #224

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Widget classes don't apply to part of table #224

Widget classes don't apply to part of table #224

Comments

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013

Exinaus commented Feb 4, 2013

Mottie commented Feb 4, 2013