Button to navigate into different tabs in Struts 2 jQuery tabbedpanel

Question

I am using tabs in Struts2 jQuery. I want a NEXT button at the end of 1st tab which can move to the next tab when clicked. However when I do this, on button click, the <div> appears in URL only. It gets loaded on page refresh. The code is as follows:

<form action="applyhere" method="post" id="companyapply">
<sj:tabbedpanel id="localtabs" cssClass="list">
    <sj:tab id="tab1" target="tone" label="Personal Information"/>
     <sj:tab id="tab2" target="ttwo" label="Educational Qualifications"/>
     <sj:tab id="tab3" target="tthree" label="Local Tab Three"/>
     <sj:tab id="tab4" target="tfour" label="Local Tab Four"/>
</sj:tabbedpanel>

<div id="tone">
<table>
  <p style="font-size: small; color: red; float: right;">*required fields</p>    
  <tr>
    <td>Enter Firstname: *</td>
    <td><input type="text" name="firstname" required
        value=<s:property value="#session.USERNAME"/> /></td>
        <input type="button" onclick="#ttwo"/><!-- onclick the button should link to the next div having an id TTWO. It shows the URL in the link, but the next tab gets loaded only when the page is refreshed. -->
  </tr>
</table>    
</div>

<div id="ttwo">
<table>
<p style="font-size: small; color: red; float: right;">*required fields</p>

<tr>
<td></td>
</tr>
</table>

Answer 1

You should publish a topic to navigate to the next tab. If you place this button for navigation

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

The code that listens it should be a subscribe handler

$(function(){
  $.subscribe('nextTopic', function(event, data) {
    var size = $("#localtabs").find(">ul >li").size();
    var active = $("#localtabs").tabs('option', 'active');
    $("#localtabs").tabs('option', 'active', active + 1 >= size ? 0: active + 1);
  });
});