带有表单的弹出对话框在提交时停留答案

【问题标题】：pop-up dialog box w/ form stays upon Submit带有表单的弹出对话框在提交时停留
【发布时间】：2016-01-06 09:00:25
【问题描述】：

我希望我的页面弹出一个包含表单的窗口。填写表格并单击提交后，我希望弹出窗口保留在页面顶部，并在其中加载新数据。

到目前为止，每当我尝试此操作时，当我单击弹出窗口中的提交按钮时，如果我有 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">&nbsp;&nbsp;Month</p>
                    <select class="blue" name="month">
                        <%=formElements.getMonthPulldown()%>
                    </select>
                <p class="zoomtext">&nbsp;&nbsp;Day</p>
                    <select class="blue" name="day">
                        <%=formElements.getDayPulldown()%>
                    </select>
                <p class="zoomtext">&nbsp;&nbsp;Year</p>
                    <select class="blue" name="year">
                        <%=formElements.getYearPulldown()%>
                    </select>
            </th>
        </tr>
        <tr>
            <th>
                <p class="zoomtext">&nbsp;&nbsp;Hour</p>
                    <select class="blue" name="hour">
                        <%=formElements.getHourPulldown()%>
                    </select>
                <p class="zoomtext">&nbsp;&nbsp;Minute</p>
                    <select  class="blue" name="minute">
                        <%=formElements.getMinutePulldown()%>
                    </select>   
            </th>
        </tr>
        <tr>
            <th>
                <p class="zoomtext">&nbsp;&nbsp;Duration</p>
                    <select class="blue" name="duration">
                        <%=formElements.getDurationPulldown()%>
                    </select>
                <p class="zoomtext">&nbsp;&nbsp;Channel</p>
                    <select class="blue" name="channel">
                        <%=formElements.getChannelPulldown()%>
                    </select>
                <p class="zoomtext">&nbsp;&nbsp;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>

【问题讨论】：

标签： javascript java jquery html ajax

【解决方案1】：

出现问题是因为提交表单意味着进入另一个页面。为了避免这种情况，我认为最好的方法是使用 ajax 提交，以便可以继续提交表单，您可以监控结果并根据结果做出正确的决定。

下面是我的sn-p：

// 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】：

有很多方法可以做到：

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：您的 sn-p 运行不正常。

:::编辑:::

防止默认提交表单
在提交到您的服务器时发送 POST 请求
使用来自服务器的新图形图像 url 响应
用新的替换旧的图形图像 src

您可以在您的问题中添加更多代码以便我提供帮助吗？尤其是你当前的 JavaScript。

【讨论】：

我不太确定如何制作一个有一个页面可以打开另一个页面的 sn-p，所以我无法显示其中包含表单的弹出窗口（只是那个页面产生弹出窗口）。如果你知道一种方法来使它工作，我一定会解决它！话虽如此，我选择的表单只是一个带有提交按钮的标准下拉菜单。
也许我不清楚（可能），但我希望与表单相同的弹出窗口也显示结果 - 再次与表单一起显示。
所以，这里是流程---用户点击一个按钮来获得主页上的弹出窗口。弹出窗口确实包含一个图形 (.png) 和一个表单。最初绘图基于一些默认值，但用户可以使用表单更改这些值并重新绘制图形。因此，我希望表单和图表位于同一个弹出窗口中，并且我希望在用户单击弹出窗口中的关闭按钮之前不会将其关闭。
阻止默认表单提交事件，如我的 edited 答案所示，使用 ajax 将新数据发送到您的服务器，处理 png 并将新图形 url 作为响应发送，最后替换png。

【解决方案3】：

使用 AJAX 提交表单。

在你的初始化代码中：

$('#form-element-id').submit(submitHandler);

其他地方：

function submitHandler(event) {
    $.ajax({
        type: 'POST',
        url: '/your/url',
    });

    event.preventDefault();
}

【讨论】：