javascript - pop-up dialog box w/ form stays upon Submit -
i page pop-up window contains form. when form filled out , submit clicked, pop-up remain on top of page new data loaded it.
whenever try far, when click on submit button in pop-up, pop-up either closes, if have target="_self", or contains of pop-up go new tab browser opens. have yet find solution allows pop-up stay when coming ajax pop-up function (listed below).
i standard non-ajax popup, if user clicks on page pop-up came from, pop-up goes underneath main page, isn't want @ all.
here page 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, current graph , form pop-up. in form of jsp backed servlet. first part of header gets parameters , zoomplot.generateplot() creates plot , saves .png. body displays .png graph , shows form. when 1 submits form, same thing happens again. first time, pop-up displayed, plot uses default values. i'm not sure how convert ajax request, if has ideas, please let me know. i'd recycle as 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 <%=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>
the problem happens because submitting form means go in page. avoid assume best way use ajax submit form can continue submitted , can monitor result , according result take right decisions.
in following snippet:
// snippet simulate 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"})); // 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>
Comments
Post a Comment