I was wondering if anyone could help me figure out where i may be going wrong.
I am using the Table colorize plugin to highlight some table columns depending on which column has been clicked. The table can be swapped in and out with different data via AJAX on clicking some tab links in an unordered list.
Basically the plugin works great on the initial page load but when i click on the tab and then try to click on another column to highligh it it does not want to highlight any column other than the default i have set.
jQuery:
// yourQuote.jsp table column highlighting, tabs & AJAX
$(document).ready(function(){
// Remove highLight class added in HTML
$(".highLight").removeClass("highLight");
// Test for the .highLighted column
var $highCells = $('table#benefit > thead tr th.highLight').length;
if ($highCells == 0) {
// Get number of columns
var $colNum = $('table#benefit > thead > tr > th').length;
var $colNum = $colNum - 1
// Set default highlighted column depending on number of table columns
if ($colNum != 0) {
if ($colNum == 5) {
var $defaultCell = $('#benefit thead tr th:nth-child(4)');
}
else if ($colNum == 2) {
var $defaultCell = $('#benefit thead tr th:nth-child(2)');
}
else {
var $defaultCell = $('#benefit thead tr th:nth-child(3)');
}
};
// Colorize plugin to highlight table columns onclick
var $myTable = $('#benefit');
// Trigger colorize plugin
$myTable.colorize({
click:'column',
hiliteClass:'highLight',
hiliteColor:'none',
hoverColor:'none',
altColor:'none',
banColumns:[0],
oneClick:true
});
// Trigger default column
$defaultCell.trigger('click');
};
// Load table of benefits on tab click
$('ul#coverTabs > li').live('click', function() {
// Find the current tab
var $oldTab = $('ul#coverTabs > li').index ($('.currentTab'));
var $oldTab = $oldTab + 1
// Removes default class applied in HTML and onClick adds 'currentTab' class
$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");
// Find the new current tab
var $newTab = $('ul#coverTabs > li').index ($('.currentTab'));
var $newTab = $newTab + 1
// If tab has changed trigger highlighting of default column
if ($newTab != $oldTab) {
$defaultCell.trigger('click');
};
// Find number of li
var $tabIndex = $(this).parent().children().index($(this));
var $tabIndex = $tabIndex + 1;
// Find the current column
var $currentLevel = $('table#benefit > thead > tr > th').index($('.highLight'));
// Find the current tab
var $currentTab = $('ul#coverTabs > li').index($('.currentTab'));
var $currentTab = $currentTab + 1
// Retrieve cost data on tab change: To be finished
//return false;
});
// AJAX different table into page
$('ul#coverTabs > li > a').live('click', function() {
// Find href of current tab
var $tabValue = $(this).attr('href');
$.ajax({
type: "GET",
cache: false,
url: $(this).attr('href'),
success: function(data){
// Find benefit wrap
$(data).find('.benefitWrap').each(function(){
// get the contents
var $benefitWrap = $(this).html();
// replace contents on page
$('.benefitWrap').replaceWith($('<div class="benefitWrap">' + $benefitWrap + '</div>'));
});
}
});
return false;
});
// Retrieve cost info on column click
$('table#benefit > thead > tr > th, table#benefit > thead > tr > th > a, table#benefit > tbody > tr > td').live('click', function() {
// Find number of columns
var $colIndex = $(this).parent().children().index($(this));
// Don't retrieve data on the first column
if ($colIndex != 0) {
var $currentMonth = $('table#benefit > tbody > tr.price > td.highLight > span.monthly').text();
var $currentYear = $('table#benefit > tbody > tr.price > td.highLight > span.annual').text();
$('.testMonthlyRate').html($currentMonth);
$('.testAnnualRate').html('(Annual cost ' + $currentYear + ')');
};
return false;
});
});