Closing a pup up page after editing - javascript

Hi I am still very junior so I would like to apologise in advance if my question is not straight forward.
I have a page with a button to edit the records from a Radgrid and a pop up page will be opened on a RadWindow for editing, so now I am trying to close the popup page once I am done and refresh the parent page, I have tried window.close() but it is not working on certain browsers like IE.
I am using c#. I will be happy if anyone can help me with the code for closing the pop up page that will work in all browsers and refreshing the Radgrid on a parent page.

What are You trying to achieve is well, quite weird, but ok :P
If You will look at the docs here, than You can see (at the bottom, under compatibility table) a info which is not part of any specification, but as far as I know, most browsers apply it. Basically, You can't close a page with script, if You haven't opened it with script.
So I would suggest You to open the edit page from your 'mother' page, keep a reference to newly opened tab, and trigger close when You will receive some event which will tell You that editing is completed.
But to be honest, It's quite bad idea to edit stuff in separate page. I would suggest You to simple use some modal dialog or redirection.

I managed to get a solution, I used a javascript code.
Also calling the refreshGrid function from the parent page.
//Added on the popup for close and refresh
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function Close() {
GetRadWindow().close();
GetRadWindow().BrowserWindow.refreshGrid();
}
//This goes to the parent page
function refreshGrid() {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}

Related

featherlight.js trigger close from the iFrame

I use featherlight to open a image upload/resize/cropping page via an iFrame.
I would like to call the closeTrigger as soon as the user hits save (within the iFrame) so that they don't need to close it manually
I'm a bit confused about this. I've checked the min.js but couldn't find anything, and I also didn't find the Javascript action tied to the closing button...
Any ideas?
This also works: parent.window.$.featherlight.current().close();
I found an answer here
How do I remove iframe within itself by using javascript
iFrame (after eveything is done):
<script>parent.window.postMessage("closetheiframe", "*");</script>
ParentWindow:
<script>
function receiveMessage(event){
if (event.data=="closetheiframe"){
var current = $.featherlight.current();
current.close();
}
}
window.addEventListener("message", receiveMessage, false);
theoretically, if featherlight.current works fine, this would help me also on a page, where I use different iFrames to be opened and closed (not at the same time though)

Posting Message to iframe using window.postMessage

I am stuck at stupid problem. I am trying to develop a Firefox Extension in which I have a popup panel and in that panel, there is an iframe of a tasks.html File.
I want to postMessage to that iframe on click of a button in my web page(Say webpage interaction with the plugin) but its not working.
Here is the image to the Panel on how it looks.
This is the function, M using to send data to the iframe. The Post Function is called when the button in the webpage is clicked.
function Post() {
var iframe = window.document.getElementById("iframe").contentWindow;
postMessageToWindow(iframe, "Hello");
}
function postMessageToWindow(win, message) {
try {
win.postMessage(message, '*');
return true;
} catch(e) {
return false;
}
}
and In that html page, I have
window.addEventListener('message', function(e) {
var str_data = e.data;
document.getElementById('test').innerHTML = str_data;
});
but nothing gets shown in the test DIV.
Please help me with it. Thanks.
Ignore my message about win.postMessage I didn't know that postMessage was a "native" function. It's cool helping you I learned something.
Anyways yes it would be nice if your code worked on first time. Thanks to some info from Blargh I found your problem.
Find sample_button.appendChild(tasks_popup); and remove that, why were you doing that? Right now its cloning the original object and adding it.
Another thing, why go through postMessage? Instead of postMessage you can simply do tasks_iframe.contentDocument.querySelector('#test').innerHTML = 'why bother with postMessage, just do this? but i fixed postMessage for you too<br>';
Another thing, the interval of 300ms works but its intensive and not the best solution. It will work for now though.
Do you have plans to upload this to addons.mozilla.org? They don't like setting innerHTML, if you plan to release there let me know and I'll show you how to do it without innerHTML.
Also your "Refresh" button in the panel in overlay.xul needs fixing to document.getElementById('tasks-list').contentDocument.location.reload()
in the code you posted, im not seeing the toolbar button get added, its not even in the customize view, did you test your sample code you uploaded?
the addAsTask function is failing hard in your sample code because elements like #sample-button and #TasksPanel don't exist. please make sure your test case works before uploading
box.com/s/hxn16axnxbwc151h92g
the addon doesnt work on install but i see a problem here:
function postMessageToWindow(win, message) {
try {
window.top.postMessage(message, '*');
return true;
} catch(e) {
return false;
}
}
on line3 it says window.top. use win.top. also i dont think u need to use .top. just use win.postMessage
also is postMessage a function in the iframe? because when i look theres no postMessage function in tasks.html

How to detect which html browser is opened and pop up there

The problem I am facing is in the scenario that one opens my site in a browser and eventually on clicking a link through open.window() method another window of the same domain is opened. Probability of user staying in both the windows are equal. Now I want to detect which window the user is in and throw a javascript popup there. Though the code must be in the parent window. I have tried window.opener() method but it is of no help. Please help.
I have edited a lot and put it here for demo.
setInterval((function(){
$("div.mask").css("display","");
}),10000);
$("div.mask,div.close").click(function(event) {
var $target = $(event.target);
if ($target.hasClass("mask") == true
|| $target.hasClass("close") == true) {
$("div.mask").css("display","none");
};
});
Now I want the masked popup to come at the top of all windows opened. Can we add .focus() to popup in jQuery?
I don't think you can know where the user "stays in". Better call your popup function in both windows. Just call your function and the popup will be opened where from it was called.
Anyway, I don't understand very well why you need to know which window the user is facing and what will open the popup.

Redirect popup on main window close

A pop up is opened when a user clicks a button.
This pop up will go to a holding page, and wait for the user to leave the website or close the browser.
Then when the user leaves or closes the browser, it will redirect the pop up location to a different site.
I have tried several variants of the following code:
win=window.open('google.com','popup'); //just to illustrate the "win" = my window.open().
$(window).bind('beforeunload', function() {
window.win.location.href="http://the-new-location.com";
//tried something like this as well:
//win.location.href="http://the-new-location.com";
});
But without luck.
I am not brilliant with javascript /jquery so any help on how to make this work would be deeply appreciated.
Thanks!
I found a solution:
win=window.open('google.com','popup');
window.onunload = redirect;
function redirect(){
window.win.location.href="http://the-new-url.com";
};
I know you already have a prototype working, but if you want the jquery option:
var popup = window.open('http://google.com', 'popup');
$(window).unload(function() {
if(!popup.closed) {
popup.location.href = 'http://surveyurl.com/';
}
});
You should also be checking to see if popup.closed is there.

The proper way to handle popup closing

I'm looking for close event for popup. I've found one for XUL, but I need it for HTML.
Popup has closed property.
>>> var popup = open('http://example.com/', 'popup', 'height=400,width=500');
>>> popup.closed
false
Well, I can check it once at half second.
function open_popup() {
var popup = open('http://example.com/', 'popup', 'height=450,width=450');
var timer = setInterval(function(){
if (popup.closed) {
alert('popup closed!');
clearInterval(timer);
}
}, 500);
}
I've tested it on Chrome 4.0.249.27, Opera 10.10, Safari 4.0.4, and Firefox 3.5.5. All works fine.
But setInterval bother me. It is ugly. Is there a better way of doing this?
UPDATE:
I use popups for authentication dialog (oAuth, actually). I wanna send some data to parent window after popup close (through postMessage).
Page inside popup from another domain. So, I can not add any event (unload) to it due security restrictions.
I can not use iframe due to iframe buster script. So, I can not use any fancy jQuery modal dialogs.
I can not edit anything inside popup.
You might want to look into the unload event, take a look at Javascript: Popups
edit: as you've said you cannot edit anything inside the popup, there really aren't any options left. I believe your current setInterval code does the job just fine. You should ask yourself if realtime detection of the popup closing is absolutely critical. That 500 milliseconds timer certainly won't strain hardly any resources or bring someones computer to its knees.
I have used jQuery Dialog and it has a close event
http://jqueryui.com/demos/dialog/.
Am not sure if I understand your question right,why do you want to use the timer ?
Use window.opener in the pop-up window. i.e. something like:
onunload = opener.alert('popup closed');
or
onunload = opener.nameOfAFunction();

Categories

Resources