Rupali Pawar Rupali Pawar - 5 months ago 56
jQuery Question

Ajax display response on popup div without redirecting response on browser tab

I'm working on a project(struts framework) where I want to change UI of design.In exist project there are menu tab.In exist project after clicking each menu the jsp page is opening on new browser window.I want to open in on modal(popup) instead of new browser window.I added following code.
topMenu.jsp contain menu tab with various submenu.
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>


After clicking on "VenderEdit" menu it will load the VendorEdit.jsp along with dynamic data on popup(modal).After clicking on "Search" button the form get submitted but response get display on new tab of browser instead of "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>


What can I do so that response get display on modal/pop-up instead of new browser tab? Where I need to do changes in my code?Suggest

Answer

I would try to remove the form submit button and replace it for a normal button. It should be enough because you are using the onclick.

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