jsp - Struts 2 Jquery tab navigation

Question

When navigating from one tab to another, i.e, on clicking the submit button in a tab1 (which is jsp) the tab2 has to get loaded. My code is below.

  <sj:tabbedpanel id="remotetabs" onCompleteTopics="tabcomplete"
    onChangeTopics="tabchange">
    <sj:tab id="tab1" href="test1.jsp" label="Tab One" />
    <sj:tab id="tab2" href="test2.jsp" label="Tab Two" />           
   </sj:tabbedpanel><sj:submit></sj:submit>

---

The jsp I have used is

 <s:url var="remoteurl1" action="ajax1" />
 <s:url var="remoteurl2" action="ajax2" />
 <sj:tabbedpanel id="tabpanel">
<sj:tab id="tab1" href="Test1.jsp" label="Tab One" />
<sj:tab id="tab2" href="Test2.jsp" label="Tab Two" />
 </sj:tabbedpanel>
 <sj:a href="#" onClickTopics="movetonextdiv" button="true">Next</sj:a>

and my script is

  $.subscribe('movetonextdiv', function(event, data) {
                   var selected = $("#tabpanel").tabs('option', 'selected');
                   $("#tabpanel").tabs('option', 'selected', selected + 1);
            });

I still face an issue like in the developer tools I am getting the error as Object doesn't support this property or method for the below line of code.

  var selected = $("#tabpanel").tabs("option", "selected");

Answer 1

Here you go :

<sj:a href="#" onClickTopics="movetonextdiv" button="true">Next</sj:a>


<script>
    $.subscribe('movetonextdiv', function(event, data) {
                    var selected = $("#tabpanel").tabs("option", "selected");
                    $("#tabpanel").tabs("option", "selected", selected + 1);
                });
</script>

<sj:tabbedpanel id="tabpanel" >...</sj:tabbedpanel>