在瀏覽器選項卡上沒有重定向響應的彈出div上的Ajax顯示響應

Question

我正在開發一個項目（struts框架），我想在其中更改設計的UI。在現有項目中有菜單選項卡。單擊每個菜單後存在的項目在新的瀏覽器窗口打開jsp頁面。我想打開模式（彈出）而不是新的瀏覽器窗口。我添加了以下代碼。 topMenu.jsp包含帶有各種子菜單的菜單選項卡。 topMenu.jsp

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-8"> 
      <ul class="nav navbar-nav"> 
       <li><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" > 
        Menu1 <span class="caret"></span> 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a data-toggle="modal" data-target="#js-custom1" href="" onclick="$('#js-custom1').load('showCustomerList.do');">Customers</a></li> 
         <li><a data-toggle="modal" data-target="#js-custom2" href="" onclick="$('#js-custom2').load('showVendorList.do');">Vendors</a></li> 
         <li><a data-toggle="modal" data-target="#js-custom3" href="" onclick="$('#js-custom3').load('showVendorEditList.do');">VenderEdit</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav>     
<!-- Load the modal --> 
<div class="modal fade" id="js-custom1" tabindex="-1" role="dialog"></div> 
<div class="modal fade width-more" id="js-custom2" tabindex="-1" role="dialog"></div> 
<div class="modal fade width-more" id="js-custom3" tabindex="-1" role="dialog"></div> 

點擊「VenderEdit」菜單上，將加載VendorEdit.jsp與動態數據沿彈出（模式）。之後點擊「搜索」按鈕後的形式得到提交，但反應得到顯示在瀏覽器的新選項卡上而不是「testResult」div。

VendorEdit.jsp

<script language="JavaScript"> 
function checkSearch() { 
    $(document).ready(function() { 
       document.VendorEditListForm.direction.value = "Search"; 
       $.ajax({ 
        data: $('#frmAPVendorEdit').serialize(), 
        type: $('#frmAPVendorEdit').attr('method'), 
        url: $('#frmAPVendorEdit').attr('action'), 
        success: function(response) { 
         $('#testResult').html(response); 
        } 
       }); 
       return false; 
      }); 
} 
</script> 
<formFieldErrors:formErrors form="VendorEditListForm"/> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button> 
      <div class="modal-body"> 
      <html:form scope="request" action="/showVendorEditList" method="post" styleId="frmAPVendorEdit">   
       //...these area contain form fields like input,check box,combo box,etc.. 
       <div class="row"> 
        <div class="btn-group btn-group-right"> 
         <a href="" class="btn btn-white btn-indent-right">Help</a> 
         <html:submit value="Search" onclick="checkSearch();" property="submitButton" styleClass="btn btn-light" ></html:submit> 
        </div> 
       </div> 
      </html:form> 
      <div id="testResult"></div> 
     </div> 
    </div> 
</div> 

struts-config.xml中

<struts-config> 
    <form-beans> 
     <form-bean name="VendorEditListForm" type="com.ui.struts.form.VendorEditListForm" /> ... 
    </form-beans> 
    <global-forwards> 
     <forward name="ShowVendorEditJsp" path="/showVendorEditList.do" /> ... 
    </global-forwards> 
    <action-mappings> 
     <action name="VendorEditListForm" path="/showVendorEditList" scope="session" type="com.ui.struts.action.ShowVendorList" unknown="false" validate="false"> 
      <forward name="ShowVendorListJsp" path="/VendorEdit.jsp" redirect="false" /> 
     </action> ... 
    </action-mappings> 
</struts-config> 

我能做些什麼，這樣，響應得到莫代爾/彈出，而不是新的瀏覽器選項卡中顯示？我需要在代碼中進行更改嗎？建議

Answer 1

我會嘗試刪除表格submit按鈕並將其替換爲正常按鈕。這應該就夠了，因爲你使用的是onclick。

<button type="button" class="btn btn-default" onclick="checkSearch();" >Search</button>