tablesorter in ui tab not working on IE (6 or 7)
I have a ui tab layout. One of the tabs has a table which is sorted
using the tablesorter plugin. This all works perfectly on Firefox but
an error is shown on both ie6 and ie7 running on xp. The error is:
Object has no properties. If I take the tablesorter out of the tabbed
layout it works fine. Is this a bug in the ui tabs code or the
tablesorter code and if so how can I get a sorted table working in a
tabbed layout?
This is my tab calling code:
$(document).ready(function() {
$('#mainTab > ul').tabs({ cache: true, ajaxOptions: {cache: false}});
});
and then my tab html:
<div id="mainTab">
<ul>
<li><a href="listUsers.cfm" title="tab1"><span>User List</span></a></
li>
</ul>
</div>
Then in my listUsers.cfm I have the following tablesorter stuff:
<script type="text/javascript" src="assets/js/jquery/
jquery.tablesorter.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.tablesorter.defaults.widgets = ['zebra'];
$("#userlist").tablesorter();
$("#userlist > tbody > tr").click(function() {
var contactid = $(this).attr('id');
var newName = 'User Details';
var thePage = "editUser.cfm&contactid=" + contactid;
$('#mainTab > ul').tabsAdd(thePage,newName,2);
$('#mainTab > ul').tabsClick(2);
}).hover(function() {
$(this).addClass('hover_tablerow');
}, function() {
$(this).removeClass('hover_tablerow');
});
});
</script>
Then my html:
<table id="userlist" class="tablesorter" width="700" cellspacing="0"
cellpadding="3" border="0">
<thead>
<tr>
<th style="width: 80px;">Contact ID</th>
<th style="width: 200px;">Username</th>
<th style="width: 200px;">Called Name</th>
<th style="width: 150px;">Surname</th>
<th style="width: 150px;">Town</th>
</tr>
</thead>
<tbody>
<tr id="13">
<td>13</td>
<td>joe.bloggs</td>
<td>Joe</td>
<td>Bloggs</td>
<td>Oxford</td>
</tr>
</tbody>
</table>
I can probably post a demo url if needed but has anyone seen this
problem before and have managed to fix it?
Cheers,
Dave