在表單提交 - 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

使用jQuery處理它並使用Bootstrap 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();
        });
});