I have a page where a user can upload a bunch of files as part of a form. The files are uploaded to the cloud with each addition. If they cancel the form, the files are deleted from the cloud. If they refresh the page or close the browser before completing, I would also like to delete those files from the cloud. Is it possible to hook into these events?
The same way ytou have onload when the page load, you have unload when you, well, unload.
Confirmation before closing of tab/browser
How to show the "Are you sure you want to navigate away from this page?" when changes committed?
If you want to add an message before that, onbeforeunload seems to do the trick:
Implementing "this page is asking you to confirm that you want to leave"
<html>
<body onunload="javascript:alert('Beep!');" onbeforeonload="javascript:return confirm('I beep first. Continue?');">
Close me for an alert
</body>
</html>
*Disclaimer: This is a terrible example, do not inline javascript.
You are looking for window.onunload = myFunciton: http://www.w3schools.com/jsref/event_onunload.asp
Execute a JavaScript when a user unloads the document:
<body onunload="myFunction()">
You want something like this:
window.onbeforeunload = handler;
In the handler itself you also can return some string that is shown in the resulting alert box (which is always displayed by the browser, you cannot control that). However the return value does not work in Firefox which will ignore your message. Also note that you only can have one beforeunload handler.
Related
I have a web page that gets refreshed, when something happens on any of its children pages. When it happens, the IE pop-up appears with the following message: "To display the webpage again, the web browser needs to resend the information you've previously submitted. If you were making a purchase, you should click Cancel to avoid a duplicate transaction. Otherwise, click Retry to display". See the image attached:
I'm ok with all that, but I was wondering if there's a way to change the actual text of the message, for example, removing the last sentence. I know this pop-up can't be tampered with, but perhaps there's a way to replace it with a custom made pop-up, serving the same function, but showing a different text. I assume first I would have to suppress the original message, then call a confirm box in a beforeupdate function, where clicking OK (for example) would resend the information submitted and Cancel would let you remain on the page without refreshing it. However, my Javascript and JQuery knowledge is a bit rusty and I'm not sure how to implement it properly. Any help is appreciated.
Thank you
So, what I have is a lot of pages like this, with GET parameters: benchmark.php?game_id=87
that display the information about the particular game (info is in a database) and also contains an Edit button.
The Edit button opens a new window using JS window.open("edit_game.php?game_id=87",...)
The Edit window contains a few textboxes to add/modify data and a Save button.
The desired behaviour here is that when I press the Save button on the edit_game.php page, not only that the information is saved in the DB (this works) but also the benchmark.php?game_id=87 page is maybe refreshed so that the information displayed is actual. I don't know how to do the 'submit on page x, page y is aware and refreshes'.
I assume I should use AJAX for this but I don't know where to start. What I tried is something like this
setInterval( function(){
$('#refresh_station').load('game_information.php');
}, 2000);
that every 2 seconds it refreshes the information present in benchmark.php?game_id=87 but I find this very inefficient since it refreshes the info even if no modifications happened.
Is this the only way to approach this situation?
Edit: I should mention that edit_game.php?game_id=87 is not supposed to close or anything after pressing Save. So I can't just use the submit form to redirect back to benchmark.php.
Yes you should use Ajax for it also add one field in Database table last_update, now when page edit_game.php?game_id=87 load it have last_update time, ajax check this last update on some interval time if ajax see there is any update page should be refreshed.
Running a loop that checks every few seconds whether the records have changed isn't the best solution in my opinion. There's a much easier way to trigger a page refresh when you submit a form in a popup window.
Using window.opener you can perform actions on the window that opened the popup that you're currently in. In your case:
<form onsubmit="window.opener.location.reload();">
Your form here.
<input type="submit" value="Save changes">
</form>
Or in jQuery:
$('form').submit(function() {
window.opener.location.reload();
});
https://jsfiddle.net/yqv1eh8w/1/
postMessage
can communicate with the child window. Link
window.addEventListener("message", function (event) {});
will let you listen to it from a child window.
This should be help you with what you want.
The entire thing communicates with the help of events and messages.
Also, you will need to run this locally (coz I opened popups to the same window)
IMO, the best approach is to use a popup form. If your web page is already using Bootstrap, you can add a modal popup easily with the edit form as it's content. When clicking on the edit button, instead of opening a new window, you can open this popup.
Then submit this form with ajax on click of the submit button and inside the Ajax success function, add javascript/jQuery to close the modal and refresh the page content.
Im a beginner and i see that line of code a lot on javascript files , for example :
window.onunload=function(){};
when should i use this and what is it role exactly ?
thank you .
This function gets called when the user closes the browser or navigates away from the page.
https://developer.mozilla.org/en/DOM/window.onunload
You also might want to check out onbeforeunload, which allows you to prompt the user with a confirmation message before leaving the page. This can be useful for reminding the user to save their changes, or making sure the user doesn't actually want to claim their free iPad 2.
onunload is an event that is triggered when the user navigates away from your page, or when the page is "unloaded".
It's triggered when a user follows a link, or closes the tab. It's used for clean up. Like saving a user's data when they leave the page. Usually it's paired with onbeforeunload (which is called before onunload is using the same criteria) to warn a user that they have unsaved data.
if a page has an onunload handler, browsers that restore the page state (remembering changed form field values, script environment) when you navigate away and back to the page do not-
that is, they load the page as if it was the first time it was opened, with no user applied changes.
I have a simple logon page. When the user is validated, the window navigates to a new page. The javascript is window.open('http://www.google.com',"mytest",'toolbar=no'); My expectation is that when it navigates away from our logon page and opens the google site that the back button would be disabled. But it's not. Does anyone have any idea why?
It depends on your browser. Ultimately, all you can do with javascript's window.open() is tell the browser what you'd like it to do, but it's not obligated to do it. Browsers can and do ignore some directives based on user preferences.
I believe the option your looking for is 'location=no', as that hides the address bar and therefore the back button too. The toolbar is things like favorites/etc.
This is bad practice - what happens if the user has javascript disabled? If the browser prevents the js from removing the toolbar of the main window?
Instead, amend the logon page to detect whether the user is logged in before showing the login form. If logged in, show a message saying so instead of the form - that way, a user clicking back won't be a problem.
I find it very annoying when a website messes around with my browser window, and generally don't come back.
This is what worked for me. Instead of disabling the back key. I listen for on unload event. I then write the following in javascript:
window.onbeforeunload = function () { return "You should not press the back button while in this application. If you continue, your work will not be saved and you will need to log back in."}
Java Script pops a dialogue box with OK and Cancel options. If the user clicks cancel. The application stays right where they are. The script is embedded within the tags. For me this is the ideal solution. I found this at
http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript
I'm trying to get this JavaScript to work properly. My intention is, when a user is trying to close the site page to get an alert saying "stay on current page or close" If they hit 'ok' I want it to close, if they hit 'cancel' i want it to redirect to another page. The problem is, when they try to go to another page on the same site, it gives them that popup. I want it to show only when closing, not when leaving the page to another page. I'm not sure if that's possible, I do appreciate your help and comments.
window.onbeforeunload = fget;
function yPop(url) {
var found = 1;
window.onbeforeunload = '';
window.location = url;
return false;
}
function fget() {
alert("Thank you for visiting our website, you are welcome any time! \n\n");
window.location = "http://NewLink.com";
return "\n________________________\n\n PRESS 'CANCEL' To Stay On The Current Page \n\n________________________\n";
}
The problem is, when they try to go to another page on the same site, it gives them that popup. I want it to show only when closing
Don't do this.
You can't detect closing only, but you can tell the difference between leaving by clicking on an internal link and other kinds of leaving, including external links, back button, closing and choosing/typing a new URL. In a script after the page has loaded, set the onbeforeunload event, then scan over all the document.links and test their .host against the current location.host. If they match, it's an internal link. In this case add an onclick event to them that removes the onbeforeunload event before returning true, allowing the link to operate normally without a warning.
Seriously, don't do this. It is incredibly irritating, arrogant and useless. Webmasters who employ leaving-pester scripts are condemned to the the fourth circle of internet hell, where they must spend the rest of eternity making stylesheets work on Netscape 4 using only ed, a worn toothbrush and a < layer>-tag.
you should use the window onbeforeunload Event.
http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
https://developer.mozilla.org/en/DOM/window.onbeforeunload
for jquery users :
$(window).unload( function () { alert("Bye now!"); } );
You may want to consider building a "You're about to leave this site" page instead.
The idea is that you wrap URLs on the page that aren't on your site to point to that page, letting the visitor know they're about to leave, and giving them a chance to go back, or proceed.
It's gentler than an unexpected modal dialog, it lets you format your messaging better, and it ultimately gives your users the exact same choice.