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>

Ajax在弹出div上显示响应，而不在浏览器选项卡上重定向响应

1 个答案: