带表单的弹出对话框停留在提交状态
[英]pop-up dialog box w/ form stays upon Submit
问题描述
我希望页面弹出一个包含表单的窗口。 填写表单并单击“提交”后，我希望弹出窗口保留在页面顶部，并在其中加载新数据。
到目前为止，无论何时尝试此操作，当我单击弹出窗口中的“提交”按钮时，如果我有target =“ _ self”，则该弹出窗口都会关闭，或者该弹出窗口中的包含内容会进入一个新标签页，浏览器打开。 我尚未找到一种解决方案，当从此AJAX弹出功能（如下所列）中弹出时，该弹出窗口不会出现问题。
我可以执行一个标准的非AJAX弹出窗口，但是如果用户单击弹出窗口来自的页面，则该弹出窗口将位于主页下方，这根本不是我想要的东西。
这是我的弹出窗口来自的页面
$(function() { $("#dialog").dialog({ autoOpen: false, modal: true, width: 1200, height: 700, buttons: { "Dismiss": function() { $(this).dialog("close"); } } }); $(".dialogify").on( "click", function(e) { e.preventDefault(); $("#dialog").html(""); $("#dialog").dialog("option", "title", "Loading...") .dialog("open"); $("#dialog").load( this.href, function() { $(this).dialog("option", "title", $(this).find("h1").text()); $(this).find("h1").remove(); }); }); });
<p> <div id="dialog"></div> <a class="dialogify left_menu" href="html/testpopup.html">Test</a>
因此，这是当前的图形和表单弹出窗口。 它采用由Servlet支持的JSP的形式。 标头的第一部分获取所有参数，然后zoomPlot.generatePlot（）创建图并将其另存为.png。 主体显示.png图，然后还显示表单。 当一个人提交表格时，同样的事情再次发生。 第一次显示此弹出窗口时，该图使用默认值。 我不确定如何将其转换为AJAX请求，因此如果有人有什么好主意，请告诉我。 我想尽可能地回收。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:useBean id="zoomPlot" class="hourPlot.ZoomPlot" />
<jsp:useBean id="formElements" class="hourPlot.FormElements" />
<jsp:setProperty name="formElements" property="minute" param="minute" />
<jsp:setProperty name="formElements" property="hour" param="hour" />
<jsp:setProperty name="formElements" property="day" param="day" />
<jsp:setProperty name="formElements" property="month" param="month" />
<jsp:setProperty name="formElements" property="year" param="year" />
<jsp:setProperty name="formElements" property="duration"
param="duration" />
<jsp:setProperty name="formElements" property="scale" param="scale" />
<jsp:setProperty name="formElements" property="channel" param="channel" />
<jsp:setProperty name="formElements" property="lowFreq" param="lowFreq" />
<jsp:setProperty name="formElements" property="highFreq"
param="highFreq" />
<jsp:setProperty name="formElements" property="band" param="band" />
<jsp:setProperty name="zoomPlot" property="minute" param="minute" />
<jsp:setProperty name="zoomPlot" property="hour" param="hour" />
<jsp:setProperty name="zoomPlot" property="day" param="day" />
<jsp:setProperty name="zoomPlot" property="month" param="month" />
<jsp:setProperty name="zoomPlot" property="year" param="year" />
<jsp:setProperty name="zoomPlot" property="duration" param="duration" />
<jsp:setProperty name="zoomPlot" property="scale" param="scale" />
<jsp:setProperty name="zoomPlot" property="channel" param="channel" />
<jsp:setProperty name="zoomPlot" property="lowFreq" param="lowFreq" />
<jsp:setProperty name="zoomPlot" property="highFreq" param="highFreq" />
<jsp:setProperty name="zoomPlot" property="band" param="band" />
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%
zoomPlot.generatePlot();
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<script>
if (window.opener)
window.opener.ResetTimer();
</script>
</head>
<body>
<br>
<table class="zoom_plot">
<caption class="zoom_plot">Zoom Plot For <%=formElements.getMonth()%>
<%=formElements.getDay()%>, <%=formElements.getYear()%>
</caption>
<tbody>
<tr>
<td><img alt="zoomed seismogram"
src="/scz/images/zoomplots/hourplot<%=zoomPlot.getPlotTime()%>.png">
</td>
</tr>
</tbody>
</table>
<p></p>
<p></p>
<form class="zoommenus" method=get action="/scz/jsp/wait.jsp">
<table>
<caption class="zoom_controls">Zoom Options</caption>
<tbody>
<tr>
<th>
<p class="zoomtext"> Month</p>
<select class="blue" name="month">
<%=formElements.getMonthPulldown()%>
</select>
<p class="zoomtext"> Day</p>
<select class="blue" name="day">
<%=formElements.getDayPulldown()%>
</select>
<p class="zoomtext"> Year</p>
<select class="blue" name="year">
<%=formElements.getYearPulldown()%>
</select>
</th>
</tr>
<tr>
<th>
<p class="zoomtext"> Hour</p>
<select class="blue" name="hour">
<%=formElements.getHourPulldown()%>
</select>
<p class="zoomtext"> Minute</p>
<select class="blue" name="minute">
<%=formElements.getMinutePulldown()%>
</select>
</th>
</tr>
<tr>
<th>
<p class="zoomtext"> Duration</p>
<select class="blue" name="duration">
<%=formElements.getDurationPulldown()%>
</select>
<p class="zoomtext"> Channel</p>
<select class="blue" name="channel">
<%=formElements.getChannelPulldown()%>
</select>
<p class="zoomtext"> Scale</p>
<select class="blue" name="scale">
<%=formElements.getScalePulldown()%>
</select>
</th>
</tr>
</tbody>
</table>
<p></p>
<input type="submit" value="Re-Plot"></form>
<p></p>
<p><a href="javascript:window.open('', '_self', ''); window.close();">Close Window</a></p>
</body>
</html>
3 个解决方案
解决方案1
0 2016-01-05 23:22:53
发生问题是因为提交表单意味着要进入另一个页面。 为了避免这种情况，我认为最好的方法是使用ajax提交，以便可以继续提交表单，并且可以监视结果，并根据结果做出正确的决定。
在我的以下代码段中：
// this is only for the snippet to simulate the load function var myHtml = ['<!DOCTYPE html>' + '<html lang="en">' + '<head>' + '<meta charset="UTF-8">' + '<title></title>' + '<style></style>' + '<body>' + '<h1>My Form</h1>' + '<form name="foo" action="form.php" method="POST" id="foo">' + '<label for="bar">A bar</label>' + '<input id="bar" name="bar" type="text" value="" />' + '<input type="submit" value="Send" />' + '</form>' + '</body>' + '</html>']; var blob = window.URL.createObjectURL(new Blob([myHtml], {"type": "text/html"})); // from here start code $(function() { $("#dialog").dialog({ autoOpen: false, modal: true, width: 1200, height: 700, buttons: { "Dismiss": function() { $(this).dialog("close"); } } }); $(".dialogify").on("click", function(e) { e.preventDefault(); $("#dialog").dialog("option", "title", "Loading...").dialog("open"); // $("#dialog").load(this.href, function() { $("#dialog").load(blob, function() { $(this).dialog("option", "title", $(this).find("h1").text()); $(this).find("h1").remove(); // event submit added $(this).find("form").submit(function(e) { e.preventDefault(); var $form = $(this); var $inputs = $form.find("input, select, button, textarea"); var serializedData = $form.serialize(); var url = $form.attr("action"); var posting = $.post(url, serializedData); posting.done(function (data, textStatus, jqXHR) { alert('form Submitted!'); }); posting.fail(function (jqXHR, textStatus, errorThrown){ alert('error'); }); }); }); }); });
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> <p> <div id="dialog"></div> <a class="dialogify left_menu" href="testpopup.html">Test</a>
解决方案2
0 2016-01-05 23:24:00
我有很多方法可以做到：
1：表单和iframe
将表单定位到iframe：
<iframe name="foo"></iframe>
<form target="foo"></form>
- 在初始加载时使用CSS可视地隐藏iframe。 您应该
visibility: hidden;而不是display: none;因为后者会破坏DOM中的元素。 - 防止默认提交表单。
- 提交表单后（使用AJAX） ，隐藏表单并显示iframe。
- 该对话框仍将打开。
2：使用AJAX的表单
将表格包装在div中，如下所示：
<div id="results-container">
<form></form>
</div>
然后使用AJAX提交表单并在＃results-container中显示结果
注意：我试图解释该过程，以便您能够实现自己的登录。
不要忘记以防止在以上任何示例中默认提交表单！ 由于您使用的是jQuery，因此如下所示：
$(this).find("form").submit(function(e) {
e.preventDefault();
});
PS： 您的代码段无法正常运行。
：：：编辑：：：
- 防止默认提交表单
- 在提交到您的服务器上发送POST请求
- 用服务器上的新图形图像URL响应
- 将旧图图像src替换为新图
您可以在问题中添加更多代码以便我提供帮助吗？ 特别是您当前的JavaScript。
解决方案3
0 2016-01-06 00:11:59
使用AJAX提交表单。
在您的初始化代码中：
$('#form-element-id').submit(submitHandler);
别处：
function submitHandler(event) {
$.ajax({
type: 'POST',
url: '/your/url',
});
event.preventDefault();
}
表单提交按钮弹出框PHP / Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.