views:

37

answers:

0

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;   
}); 

});