I want to do something like this:
/*do something*/
var returnValue = /*open a popup window*/
/*do something with return value*/
I found showModalDialog can make this work, here's the jsfiddle example:
$("#test").click(function() {
var w = window.showModalDialog("about:blank",window , "");
alert("popup closed!");
});
But unfortunately safari on iPad does not support showModalDialog. The only way I can imagine is:
in parent window
window.callback = /*callback function after the popup closed*/
/*open a popup window*/
in child window
window.onbeforeunload = function() {
window.opener.callback.call()
}
But using callback makes the code hard to read. Is there a better way to pause the javascript until the popup window is closed?
Any suggestion is greatly appreciated.
I can see that you use jQuery. If you're allowed to use jQueryUI as well you can utilize the jqueryui dialog widget:
JS
$(function() {
$( "#dialog" ).dialog({
autoOpen:false,
close: function() {alert('window closed')} //your "on close" logic here
});
$( "#test" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
HTML
<div id="dialog" title="My Dialog">
<p>my content </p>
</div>
<button id="test">open blocking popup</button>
JSFiddle
Related
I am trying to use a dialogue box modal for displaying terms and condition on my webpage. But at button disagree the webpage doesnot close while calling function window.close. I want to close the recent page after clicking the button disagree
Below pasted is the sample code I am having problem at.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog( window.close() );
}
}
});
});
</script>
Thank you in advance.
You do it like this:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog("close");
}
}
});
});
</script>
You can either close the dialog itself using the code above or you can close the window if it's a popup window opened previously via JavaScript.
In which case you'll need the reference of that to invoke the close method.
However you can't close an entire webpage/tab with JavaScript which is a javaScript limitation. As I mentioned, you can only close it if it was previously opened with JavaScript.
I'm trying to make a web page by using xhr aJax.
I received Jquery Dialog via xhr.responseText .
A.jsp (Actually viewed page's getting data part)
function getOrderData(tableid){
if(xhrGetOr) {
xhrGetOr.open("GET", "http://localhost:8080/Erpos/POS_orderAjaxGet.html?id="+tableid,true);
xhrGetOr.onreadystatechange = function() {
if(xhrGetOr.readyState == 4 && xhrGetOr.status == 200){
var dialog = $(xhrGetOr.responseText).appendTo('body');
viewdialog();
}
}
xhrGetOr.send(null);
}
}
When I click some button, getOrderData() is called and As all data is received, viewdialog() method is also called. So, dialog is displayed in a web page.
POS_orderAjaxGet.jsp
<script>
function viewdialog() {
$( "#dialog" ).dialog({
closeOnEscape: false,
autoOpen: true,
resizable: false,
draggable: true,
move:false,
height:830,
width:1085,
modal: true,
position:[0,0]
});
}
function closeMenu() {
alert("close event"); // this is well displayed
$( "#dialog" ).dialog("close");
}
</script>
<body>
<div id="dialog" title="order">
<input id="ocancel"type="button" class="btn" value="close"
onclick="closeMenu();">
</div>
</body>
Everything is good. but $( "#dialog" ).dialog("close") is not working. So I moved closeMenu() function to A.jsp. also not working...
pure POS_orderAjaGet's closeMenu() is very well wokring.
I think A.jsp can't find id 'dialog'
Let me know What problems is.
function closeMenu() {
document.getElementById("dialog").parentNode.remove();
}
It same work. But I think that is not good solution.
I've this function in jQuery:
$("#bottone_mail").on("click", function(){
$('#container_body').fadeTo(1000, 0.25);
$( "#form" ).dialog({
width:510,height:500});
return false;
That creates a form window. When the user clicks the "Send" button, this script is executed:
$("#invia").on("click", function(){
$( "#form" ).dialog("close");
$('#container_body').fadeTo(1000, 1);
$("#spc1").html("<div id='mess_invio'> Messaggio inviato con successo, grazie!</div>");
return false;
});
I want $('#container_body').fadeTo(1000, 1); to be executed when the user closes the form window with the "X" button, other than when the "Send" button is pressed.
The only related answer I could find is this:
jQuery UI Dialog Box - does not open after being closed
It doesn't work for me, though, as a function name is required.
I'm at my first steps with jQuery, so I'd be very thankful if someone was to post a tailored solution with an explanation...
you have options when you create the dialog.
Maybe you can use something like:
$( "#form" ).dialog({
width:510,
height:500,
close: function() {
$('#container_body').fadeTo(1000, 1);
}
});
You can do it like this -
$("#form").on('dialogclose', function(event) {
$('#container_body').fadeTo(1000, 1);
});
http://api.jqueryui.com/dialog/#method-close
I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.
I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};
I'm using this code:
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
/* Content is now loaded */
ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
});
});
});
along with this:
<li>HELP</li>
To load pages when the link is clicked.
I would like to know how do I add to the current script so that I can load a page the minute the page loads up, while keeping it working the way it already is? I'd like to load a page named "Homepage.html"
This should do it:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html');
});
</script>
Or if you still need that callback:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html', function() {
ThumbnailScroller('tsv_container','vertical',10,800,'easeOutCirc',0.4,500);
});
});
</script>