Question

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

每当我尝试这个到目前为止，当我点击弹出窗口中的提交按钮时，如果我有target =“_ self”，则弹出窗口会关闭，或弹出窗口的包含进入浏览器打开的新选项卡。我还没有找到一个解决方案，允许弹出窗口来自这个AJAX弹出功能（如下所列）。

我可以做一个标准的非AJAX弹出窗口，但是如果用户点击弹出窗口来自的页面，弹出窗口会出现在主页面下面，这根本不是我想要的。< / p>

以下是我的弹出窗口来自的页面

$(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>

Answer 1

问题出现了，因为提交表单意味着进入另一页。为了避免这种情况，我假设最好的方法是使用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');
        });
      });
    });
  });
});

Answer 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： 您的代码段无法正常运作。

::: EDIT :::

阻止默认提交表单

发送提交至服务器的POST请求

使用来自服务器的新图形图片网址
进行回复
将旧图形图像src替换为新图形

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

Answer 3

使用AJAX提交表单。

在您的初始化代码中：

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

其他地方：

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

    event.preventDefault();
}

提交

3 个答案:

1：表单和iframe

2：带有AJAX的表单

::: EDIT :::