Question

I have three jQuery tabs where each tab is having an HTML table with colResizable plugin implemented on each of the table. The issue is the colResizable plugin doesn’t works inside the jQuery tabs.

I thought to fiddle my issue for reference, but was unsure of how to refer the colResizable javascript file in jsFiddle.

Here is the HTML:

<div id="tabs">
<ul id="alarmsTabs">
    <li><a id = "tab1" class='alarmtab' href="#fragment-CurrentAlarms">Current Alarms</a></li>
    <li><a id = "tab2" class='alarmtab' href="#fragment-NotAckAlarms">Alarms Not Acknowledged</a></li>          
    <li><a id = "tab3" class='alarmtab' href="#fragment-AlarmLog" >Alarm Log</a></li>
</ul>
<div id="fragment-CurrentAlarms">
    <table id='CurrentAlarmTable' class='FacilityTableForScreens' cellspacing='0'>
    </table>
</div>
<div id="fragment-NotAckAlarms">        
    <table id="AlarmNotAckTable" class="FacilityTableForScreens" cellspacing="0">
    </table>                                                
</div>
<div id="fragment-AlarmLog">        
    <table id="AlarmLogTable" class="FacilityTableForScreens" cellspacing="0">
    </table>
</div>

And this is what I have written to implement jQuery tab and colResizable.

$("#tabs").tabs({
    selected: 0,        
    show: function(event, ui)
    {           
        //selectedAlarmTab = ui.index;          
        $(ui['panel']).find('table').colResizable({
            liveDrag: true
        });
    }        
});

I am unable to resize the column.

Can you please provide guidelines on how should I resolve this issue.

Thanks in advance.
Good day.

Answer 1

Problem Solved!!!

In addition to show function, the colResizable plugin needs to be applied inside the select() function of the $('#tabs').tabs() in this way:

$('#tabs').tabs({
    selected: 0,
    select: function(event, ui) {
        var table = $(ui['panel']).find('table');
        $(table).colResizable({disable: true});
        $(table).colResizable();
    },
    show: function(event, ui) {
        var table = $(ui['panel']).find('table');
        $(table).colResizable({disable: true});
        $(table).colResizable();
    }
});

Thanks for considering guys!!!