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.

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>

Answer 2

First, you should upgrade plugin to at least v3.6.1. Put $.subscribe before the tag which sets topics to publish that you subscribed to. Make sure you have jQuery UI enabled.

<sj:head jqueryui="true" />

the script to sibscribe topics

<script type="text/javascript">
  $(document).ready(function(){
    $.subscribe('movetonextdiv', function(event, data) {
      var el = $("#localtabs");
      var size = el.find(">ul >li").size();
      var active = el.tabs('option', 'active');
      el.tabs('option', 'active', active + 1>=size?0:active + 1);
    });
  });
</script>

tabs with navigator button

<sj:a href="#" onClickTopics="movetonextdiv" button="true">Next</sj:a>
<br/>
<sj:tabbedpanel id="localtabs" cssClass="list">
  <sj:tab id="tab1" target="jsp" label="JSP Code"/>
  <sj:tab id="tab2" target="javascript" label="JavaScript"/>
  <sj:tab id="tab3" target="java" label="Java"/>
  <div id="jsp">
    JSP
  </div>
  <div id="javascript">
    JavaScript
  </div>
  <div id="java">
    Java
  </div>
</sj:tabbedpanel>