在浏览器选项卡上没有重定向响应的弹出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>