Struts2 jquery tabbedpanel

Question

I have thee tabs in sj:tabbedpanel. I want to know which tab is activated and set values in value of a hidden field accordingly.

<sj:tabbedpanel id="localtabs" >                
   <sj:tab id="connected" target="tone" label="Connected" />
    <sj:tab id="disconnected" target="ttwo" label="Not Connected"/>
    <sj:tab id="distribution" target="tthree" label="Distributed"/>
    <div id="tone">tone</div>
    <div id="ttwo">ttwo</div>
    <div id="tthree">tthree</div>    
</sj:tabbedpanel>

Now I want to set value of hidden input field according to activated tab 0,1 or2 for tabs tone, ttwo and tthree.

<input type="hidden" name="activeTab" value="0" id ="activeTab"/>

I tried

$("#connected").click(function(){
    alert("Connected");
    $("#activeTab").val(0);
});
$("#disconnected").click(function(){
    alert("Not Connected");
    $("#activeTab").val(1);
});
$("#distribution").click(function(){
    alert("distribution");
    $("#activeTab").val(3);
});

but its not working. Thanks in advance.

Answer 1

Subscribe to onchange topics

<sj:tabbedpanel id="localtabs" onChangeTopics="tabchange" >
    <sj:tab id="connected" target="tone" label="Connected" />
    <sj:tab id="disconnected" target="ttwo" label="Not Connected"/>
    <sj:tab id="distribution" target="tthree" label="Distributed"/>
    <div id="tone">tone</div>
    <div id="ttwo">ttwo</div>
    <div id="tthree">tthree</div>
</sj:tabbedpanel>

and handle the event

$.subscribe('tabchange', function(event, data) {
    var tab = event.originalEvent.ui.newTab.attr("id");
    if (tab === "connected") {
        $("#activeTab").val(0);
    } else if (tab === "disconnected") {
        $("#activeTab").val(1);
    } else if (tab === "distribution") {
        $("#activeTab").val(3);
    }
});