Suppose a parent window opens a popup window, and from there I do some character count validation. The character count function should be triggered only when I close the window.
If the character count is below the limit, it should close normally otherwise it should display the editor with the content so that the user can work on reducing the character count and then submit back to parent window.
FYI I'm using Kevin Roth's Cross-browser editor
Thanks in Advance
You can write a function to do some character count validation. If pass, invoke method to close popup window in this function. Then, set this function as the handler to listen click event of close button .
For example, I use jQuery UI dialog as popup window.
<div id="popup">
<!--popup window content-->
<button id="save">Save</button
</div>
<script>
$("#popup").dialog({
...
});
var save = function() {
var isValidated = false; // true means passed.
//...validation here
if (validated) {
$("#popup").dialog("close");
} else {
// show some message and focus on the editor
}
};
</script>
Related
From MDN:
Dialog boxes are modal windows — they prevent the user from accessing
the rest of the program's interface until the dialog box is closed.
I tried to capture the event when a dialog box appear on the screen using window.confirm
but it seems it doesn't exist on the window level.
My question:
Is there any way to mimic the click when a dialog box appears on screen?
The above code listen and print all the events made on the page, but when I click on the button nothing printed, and when I click "ok" or "cancel" it print "FocusEvent" - I guess that this is the focus on the clicked button.
document.querySelectorAll('button')[0].addEventListener('click', function(){
window.confirm('confirmation box','click');
});
for (var key in window) {
if (key.search('on') === 0) {
document.querySelectorAll('ol')[0].innerHTML += '<li>'+key.slice(2)+'</li>';
window.addEventListener(key.slice(2), function() {
document.querySelectorAll('ol')[1].innerHTML += '<li>'+key.slice(2)+'-'+this.event+'</li>';
document.querySelectorAll('ol')[1].scrollTop = document.querySelectorAll('ol')[1].scrollHeight;
});
};
};
<button>open dialog</button>
<ol style="display: none;"></ol>
<ol style="height: 200px; overflow-y: scroll"></ol>
This confirm box seems on higher level from the window(??)
I did search a lot online but the best (and only) clues lead to 404 pages:
DOMWillOpenModalDialog
DOMModalDialogClosed
Is it possible?
I have an anchor tag whose click event calls a JavaScript function, which opens a pop up window.
Now when the user clicks the close button of the pop up window I want to generate an alert(), which asks whether the user wants to close the pop up window or not
Using the below code the alert is generate in the parent window rather than the pop up
<script>
function openForm()
{
var new_window = window.open('file:///C:/Users/Tejora/Desktop/test.html','popup''width=825,height=585,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0');
new_window.onbeforeunload = function(){
alert("Are you sure you want to close the window"); }
}
</script>
Click
Thanks in advance...
When a string is returned from the onbeforeunload handler, the browser will display a confirmation dialog with that message. Replace this line:
alert("Are you sure you want to close the window");
With this:
return "Are you sure you want to close the window?";
Here is the relevant documentation.
I have a gridview displayed in a page which also has a link. When I click on the link, a showModalDialog() will open up where I can edit the value.
After that when pressing Update button the value is getting updated in the database and my child form closes perfectly.
But I need to update my parent page table as well. So that the new value gets reflected in the parent form. I tried the following in the child window.
<body onunload="window.opener.document.forms[0].submit();">
But that is not working. Suggest me a good solution.
You do not have onUnload in a modal dialog
var res = showModalDialog(...); // execution is blocked until modal is closed
if (res) location.reload(1); // res contains what dialog set returnValue to
and in modal dialog you do
window.returnValue=true; // if ok submission
window.close(); // will return control to opening window
Anyway, did you look to the right? there are many duplicate questions about gridviews and modal dialogues
I guess you have a function on Update button click, which updates the database and close the form, can you place that code (the one that you have in unload) in that function before closing the window
So I create a simplemodal box with an iframe inside of it. in the iframe I have a text box which calls a function once it is submitted. This function then goes off and executes its own commands. What I want to do is after the person submits their text for the simplemodal box to close. I haven't really seen a attribute that allows me to set an id for the modal so I can refer to it outside the function. Here is my code:
the modal:
$.modal('<iframe src="chrome-extension://kdcfmjjkjcgaklpmpnhcmieepkiddfen/options.min.html" height="120" width="300" style="border:0">', {
close: true,
closeHTML:"",
containerCss:{
backgroundColor:"#000",
borderColor:"#000",
height:100,
padding:0,
width:300,
height:125
},
overlayClose:true,
opacity:50,
overlayCss: {backgroundColor:"#000"}
});
the options.min.html:
the passMessage:
function passMessage() {
var value = document.getElementById('speechInput').value;
var event = "commands"
$.modal.close();
chrome.extension.sendRequest({command:value}, function(response) {});
}
as you can see the modal uses the options.min.html to create a speech input box inside the modal. Once the user stops talking another function is called in which the value is taken from that box. However the $.modal.close(); function does not actually close the modal but instead just hangs my program and it goes nowhere. I need to know how to refer to the modal that is created elsewhere.
thanks for any help
If you want to close the modal from within the iframe, use the following JavaScript:
parent.$.modal.close();
As for ID's, SimpleModal automatically adds them to the dialog elements: simplemodal-overlay, simplemodal-container, and simplemodal-data
On a given webpage I have a link that opens a modal window using Thickbox. In that window I have a form which I use to save some data. After I submit the form, I close the modal window. Now my question is: can I refresh the main page after closing the modal window?
Thank you.
Call this after the form is submitted and before the window is closed:
window.opener.location.reload();
Suppose this is the div you show in modal mode. You have to call tb_remove() to close the modal window. So just use location.reload(); before that call.
<div id="modalContent" style="display:none">
<form>
...
</form>
<p style="text-align:center">
<input type="submit" id="Login"value="Click to close"
onclick="window.opener.location.reload();tb_remove()" />
</p>
</div>
Actually Thickbox is no longer being maintained, so it might be better to use a different modal window. That being said, I know Facebox allows you to bind box open and close events like this:
$(document).bind('close.facebox', function() {
// do something here
})
If using facebox simply add window.location.reload(); around line 148, so you end up with something like...
close: function() {
$(document).trigger('close.facebox');
window.location.reload();
return false
}
If still using Thickbox I'm sure it's just as easy. Do a search for "close" and add the code.
You can do this easily with the tinybox plugin:
http://sandbox.scriptiny.com/tinybox2/
var parentWindow = window;
$('#submit-deed-button').click(function() {
TINY.box.show({iframe:'submit_deed.html', closejs:function(){parentWindow.location.reload()}, post:'id=16',width:385,height:470,opacity:20,topsplit:3, boxid:'tinybox_container'})
});
The key is to pass in the parent window to the function as a JS var then you call location.reload() on that object