pop-up dialog box w/ form stays upon Submit
Question
I would like my page to pop-up a window that contains a form. When the form is filled out and Submit is clicked, I would like the pop-up to remain on top of the page with new data loaded into it.
Whenever I try this so far, when I click on the submit button in my pop-up, the pop-up either closes, if I have target="_self", or the contains of the pop-up go into a new tab that the browser opens. I have yet to find a solution that allows the pop-up to stay up when coming from this AJAX pop-up function (listed below).
I could do a standard non-AJAX popup, but then if a user clicks on the page the pop-up came from, the pop-up goes underneath the main page, which isn't something I want at all.
Here is the page where my pop-up comes from
$(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>
So, this is the current graph and form pop-up. It is in the form of a JSP backed by a servlet. The first part of the header gets all the parameters and then zoomPlot.generatePlot() creates the plot and saves it as a .png. The body displays the .png graph and then also shows the form. When one submits the form, the same thing happens again. The first time, this pop-up is displayed, the plot uses default values. I'm not really sure how to convert this to an AJAX request, so if anyone has any good ideas, please let me know. I'd like to recycle as much as I can.
<%@ 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 answers
solution1
0 2016-01-05 23:22:53
The problem happens because submitting the form means to go in another page. To avoid this I assume the best way is to use a ajax submit so that the form can continue to be submitted and you can monitor the result and according to the result take the right decisions.
In the following my snippet:
// 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>
solution2
0 2016-01-05 23:24:00
There are many ways I would do it:
1: A form and an Iframe
Target the form to the iframe:
<iframe name="foo"></iframe>
<form target="foo"></form>
- Visually hide the iframe with CSS on initial load. You should
visibility: hidden;instead ofdisplay: none;because the latter destroys an element from the DOM. - Prevent default submission of the form.
- When the form is submitted (with AJAX) , hide the form and show the iframe.
- The dialog would still be open.
2: A form with AJAX
Wrap the form in a div like this:
<div id="results-container">
<form></form>
</div>
Then use AJAX to submit the form and show results in the #results-container
NOTE: I'm trying to explain the process so that you'll be able to implement your own login.
DO NOT FORGET to prevent default submission of the form in any of the above examples! Since you use jQuery, it's like this:
$(this).find("form").submit(function(e) {
e.preventDefault();
});
PS: Your snippet is not functioning properly.
:::EDIT:::
- Prevent default submission of the form
- Send a POST request on submit to your server
- Respond with the new graph image url from the server
- Replace the old graph image src with the new one
Can you add more code to your question so I can help out? Especially your current JavaScript.
solution3
0 2016-01-06 00:11:59
Use AJAX to submit the form.
In your init code:
$('#form-element-id').submit(submitHandler);
Elsewhere:
function submitHandler(event) {
$.ajax({
type: 'POST',
url: '/your/url',
});
event.preventDefault();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.