フォーム提出時にページの同じタブにリダイレクトする - Spring MVC

Question

私はSpring MVCを使用しています。私は、複数のタブを持つJSPページを持っています。各タブにはフォームがあります。これらのタブはすべてadmin.jspという単一のjspページにあります。

POST時にタブをリダイレクトして、トランザクションのエラーメッセージまたは成功メッセージ（入力の検証）を表示します。各タブのコントローラからどのようなビューを返す必要がありますか。

コントローラー：

@RequestMapping(value="/register", method = RequestMethod.POST) 
public String registerDevice(@ModelAttribute("deviceMaster") @Validated DeviceMaster deviceMaster, BindingResult result, Model model, Locale locale) { 
    try { 
     if(result.hasErrors()){ 
      return "admin"; 
     } 
/*CODE*/ 
} 


@RequestMapping(value="/lock", method = RequestMethod.POST) 
public @ResponseBody Status lockDevice(@ModelAttribute("adminTransaction") @Validated AdminTransaction adminTransaction, BindingResult result, Model model, Locale locale,Map<String, Object> map, HttpServletRequest request, @RequestParam @DateTimeFormat(pattern="yyyy-MM-dd") Date dueDate) { 
      try { 
     if(result.hasErrors()){ 
      return "admin"; 
     } 
/*CODE*/ 
} 


    @RequestMapping(value="/unlock", method = RequestMethod.POST) 
public @ResponseBody Status unlockDevice(@ModelAttribute("adminTransaction") @Validated AdminTransaction adminTransaction, BindingResult result, Model model, Locale locale,Map<String, Object> map, HttpServletRequest request) { 
    try { 
    if(result.hasErrors()){ 
     return "admin"; 
    } 
/*CODE*/ 
} 

admin.jspに

<div class="tabs" align="center"> 
<div class="list-center"> 

<ul class="tab-links"> 
    <li class="active"><a href="#tab1">Register</a></li> 
    <li><a href="#tab2">Lock</a></li> 
    <li><a href="#tab3">Unlock</a></li> 
</ul> 
</div> 
<div class="tab-content"> 

    <div id="tab1" class="tab active"> 
     <div class="devices"> 
     <form:form method="post" id="registerForm" modelAttribute="deviceMaster" action="/DeviceManager/admin/register"> 
     <form:errors path="*" cssClass="plErroMessage" element="div" /> 
     <br> 
     <c:if test="${not empty serverError}"> 
      <div id="serverError" class="plErroMessage">${serverError}</div> 
     </c:if> 
     <div> 
      <div class="plLabelSearch">Device Id:</div> 
      <div class="plinput"><form:input path="deviceId" type="text" size="29"/></div> 
     </div> 
     <div> 
      <div class="plLabelSearch">Home Whse:</div> 
      <div class="plselect"> 
      <form:select path="warehouseHome"> 
      <form:option value="NONE" label="------- Select One -------"/> 
      <form:option value="TR" label="TRAINING"/> 
      <form:options items="${homeWhseList}" itemValue="warehouseCode" itemLabel="warehouseCode"/> 
      </form:select> 
      </div> 
     </div> 
     <br> 
     <br> 
     <div> 
      <div class="plLabelSearch">&nbsp;</div> 
      <div class="plinput"><a id="btnRegister" class="abutton">Register</a></div> 
      <div class="plinput"><a id="btnCancel1" class="abutton">Cancel</a></div> 
     </div> 
    </form:form> 
     </div> 
    </div> 

    <div id="tab2" class="tab"> 
     <div class="devices" > 
     <form:form method="post" id="lockForm" modelAttribute="adminTransaction" action="/DeviceManager/admin/lock"> 
     <form:errors path="*" cssClass="plErroMessage" element="div" /> 
     <br> 
     <c:if test="${not empty serverError}"> 
      <div id="serverError" class="plErroMessage">${serverError}</div> 
     </c:if> 
     <div> 
      <div class="plLabelSearch">Device Id:</div> 
      <div class="plinput"><form:input path="deviceId" size="29"/></div> 
     </div> 
      <div> 
      <div class="plLabelSearch">Reason Code:</div> 
       <div class="plselect"> 
      <form:select path="reasonCodeForeignKey"> 
      <form:option value="NONE" label="------- Select One -------" /> 
      <form:options items="${reasonList}" itemValue="reasonCode" itemLabel="reasonDesc"/> 
      </form:select> 
       </div> 
      </div> 
      <div class="hidden" > 
     <div> 
      <div class="plLabelSearch">Away Whse:</div> 
      <div class="plselect"> 
      <form:select path="awayWarehouse"> 
      <form:option value="NONE" label="------- Select One -------" /> 
      <form:options items="${homeWhseList}" itemValue="warehouseCode" itemLabel="warehouseCode"/> 
      </form:select> 
      </div> 
     </div> 
     <div> 
      <div class="plLabelSearch">Due Date:</div> 
      <div class="plinput"><form:input id="datepicker" path="dueDate" placeholder="yyyy-mm-dd"/></div> 
     </div> 
     <div> 
      <div class="plLabelSearch">IT Ticket:</div> 
      <div class="plinput"><form:input path="itTicket" value="" size="29"/></div> 
     </div> 
     </div> 
     <br> 
     <br> 
     <div> 
      <div class="plLabelSearch">&nbsp;</div> 
      <div class="plinput"><a id="btnLock" class="abutton">Lock</a></div> 
      <div class="plinput"><a id="btnCancel2" class="abutton">Cancel</a></div> 
     </div> 
    </form:form> 
     </div> 
    </div> 

    <div id="tab3" class="tab"> 
     <div class="devices" > 
     <form:form method="post" id="unlockForm" modelAttribute="adminTransaction" action="/DeviceManager/admin/unlock"> 
     <form:errors path="*" cssClass="plErroMessage" element="div" /> 
     <br> 
     <c:if test="${not empty serverError}"> 
      <div id="serverError" class="plErroMessage">${serverError}</div> 
     </c:if> 
     <div> 
      <div class="plLabelSearch">Device Id:</div> 
      <div class="plinput"><form:input path="deviceId" size="29"/></div> 
     </div> 
     <br> 
     <br> 
     <div> 
      <div class="plLabelSearch">&nbsp;</div> 
      <div class="plinput"><a id="btnUnlock" class="abutton">Unlock</a></div> 
      <div class="plinput"><a id="btnCancel3" class="abutton">Cancel</a></div> 
     </div> 
    </form:form> 
     </div> 
    </div> 

Answer 1

ブートストラップ3

$(document).ready(function() { 
    var activeTab = localStorage.getItem('activeTab'); 
    if(activeTab){ 
    $('.tab-links a[href="' + activeTab + '"]').tab('show'); 
    } 
$('.tabs .tab-links a').on('click', function(e) { 
     var currentAttrValue = jQuery(this).attr('href'); 
     localStorage.setItem('activeTab', currentAttrValue); 
     jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400); 
     jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400); 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active');  
     e.preventDefault(); 
     }); 
});