提交表单后重定向到页面上的同一选项卡 - Spring MVC答案

【问题标题】：Redirect to same tab on page upon Form submission - Spring MVC提交表单后重定向到页面上的同一选项卡 - Spring MVC
【发布时间】：2016-09-20 21:11:32
【问题描述】：

我正在使用 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>

【问题讨论】：

有什么方法可以发布一些 JSP 文件？
看下面的答案

标签： java jsp spring-mvc

【解决方案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();
        });
});

【讨论】：