Trigger Tab activate function - JQuery UI Tabs

Question

I run into problem.

HTML snippet looks like this

<div id="mainTab">
    <ul>
        <li><a href='#tabs-1'>TabGroup1</a></li>
        <li><a href='#tabs-2'>TabGroup2</a></li>            
    </ul>
    <div id='tabs-1'>
        <a onclick="showSubTab1Tab2();">showSubTab1Tab2</a>
        <a onclick="showSubTab2Tab2();>showSubTab2Tab2</a>
    </div>
    <div id='tabs-2'>
        <!-- First Sub Tab -->
        <div id="subTab1">
            <ul>
                <li><a href='#tabs-3'>TabGroup3</a></li>
                <li><a href='#tabs-4'>TabGroup4</a></li>            
            </ul>
            <div id='tabs-3'>

            </div>
            <div id='tabs-4'>

            </div>
        </div>
        <!-- Second Sub Tab -->
        <div id="subTab2">
            <ul>
                <li><a href='#tabs-5'>TabGroup5</a></li>
                <li><a href='#tabs-6'>TabGroup6</a></li>            
            </ul>
            <div id='tabs-5'>

            </div>
            <div id='tabs-6'>

            </div>
        </div>
    </div>
</div>

And javascript look like this. I am using JQuery UI 1.10.3

$("#mainTab").tabs();

$( "#subTab1" ).tabs({
    activate: function( event, ui ) {
        // Update Some Logs
    }
});

$( "#subTab2" ).tabs({
    activate: function( event, ui ) {
        // Update Some Logs
    }
});

function showSubTab1Tab2() {
    $("#mainTab").tabs( "option", "active", 1);
    $( "#subTab1" ).tabs( "option", "active", 1);
}

function showSubTab2Tab2() {
    $("#mainTab").tabs( "option", "active", 1);
    $( "#subTab2" ).tabs( "option", "active", 1);
}

If User click on "showSubTab2Tab2". I changed the main tab. Take the user to second tab. and then activate the second tab of subTab2 and If the tab is not previously active This will activate the second tab and fires activate event

Now here is the problem. If user do that twice then on second time the activate event is not fired. I need that event to log/populate some code on frontent.

I can't do that in my function.

Answer 1

and if you try to check the status previously in showSubTab1Tab2()

http://jsfiddle.net/S4nua/1/

Answer 2

Try this instead of your "tabs" code. It will fire every time the tab is shown:

$('a[href="#subTab2"]').on('shown', function () {
        ---- your code here ----
  });