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

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

到目前为止，每当我尝试此操作时，当我单击弹出窗口中的提交按钮时，如果我有 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>

最佳答案

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

关于javascript - 带有表单的弹出对话框停留在提交时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34622614/

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

上一篇：javascript - 获取 img src

下一篇：html - 响应式设计 : CSS Not loading on Iphone 5 Safari