[jQuery] Combining plug-ins: capturing ajax events
Hello,
I'm trying to combine two plug-ins (tablesorter and ui-tabs) and
capture ajax events from one to trigger a behavior in the other. I'm
using ui-tabs to load html with data tables via ajax, and I want to
make the tables sortable with the tablesorter plug-in. Unfortunately,
only the first tab's content is sortable. Can anyone offer advice
about how to do this? This does work in Firefox 2/Mac, but no other
browsers.
Here's a URL...
http://demo.orau.gov/nasapostdoc/about-fellows/tests/ui-tabs.htm
And my code...
$('document').ready(function(){
// empty the table container if javascript is enabled
$('#tableContainer').empty();
// tabs
$('#tabs').tabs({
fx: {opacity: 'toggle'}
});
// bind the functions to the ajaxSuccess event
$(window).bind('ajaxSuccess', function(){
// table sorter
$.tablesorter.defaults.widgets = ['zebra'];
$('table#fellows').tablesorter({
cssHeader: 'header',
cssAsc: 'headerSortUp',
cssDesc: 'headerSortDown'
});
$('table#fellows').trigger('update');
// table row colors
$('tbody tr:odd').addClass('odd');
$('tbody tr').hover(function(){$
(this).addClass('hover');},function(){$(this).removeClass('hover');});
}).bind('ajaxError', function(){
alert('There was an error retrieving the page.');
});
});