Notify user to save the changes when they change the tab - javascript

I want to notify the user to save changes (only if they do not click the save button) before they leave the tab. I found many examples on dirty page, jquery, onbeforeunload etc but every example notifies the user before they leave the page where as I want to notify before they change or move to other tab present in the navbar of the same page. Please help me out

Very basic, and it may not meet your needs, but it's kind of possible to achieve.
This method just detects the blur and focus events of window. Downside, it will also fire the alert when they click anywhere outside of the window. It's probably as close as you'll get to detecting tab changes unfortunately.
$(window).focus(function() {
//They are staying on the page
console.log("You've chocen to stay")
});
$(window).blur(function() {
//They're leaving the tab
alert("Sure you don't want to stay?");
});
Working Demo

Related

disable manual page refresh and allow programmatically only

I'm want to disable the manual refresh but still allow it throw code only.
the page is responsive so the mobile refresh(drag down) is also need to be disabled.
I've tried already to preventDefault with:
window.onbeforeunload
window.onunload
and jquery:
$(window).unload
You cannot disable a refresh - you would enforce the user to stay on your page.
A common way (like jsfiddle and others) that is used when there's unsaved state, is to trigger a popup that asks the user if the page should really be left.
This is useful if some input hasn't been saved - having just some content that is refreshed over time it may be more annoying for the users.
A possible solution is found here

event to be triggered when user leaves ckeditor or page

I have been trying to find an event that will trigger when a user leaves the ckeditor window or page in any way, this is because I want to call my save method inside the event so that when the user does try to leave their content is saved. I have inserted a conditional statement with an alert to test if its working but so far the alert hasn't been called signifying that the event I am currently using is not the correct one
here is my code block:
$(window).on('beforeunload', function() {
updateBlockByName(blockname, escape(newhtml), 1, blockid, disableBlogComment);
if (updateBlockByName) {
alert('unload save test');
}
});
any help is greatly appreciated
Actually beforeunload is broken pretty badly (probably by design) in Blink and it doesn't handle alert or other modal dialogs. If you want to display a message, you can use return:
$( window ).on( 'beforeunload', function() {
return 'Message for the user';
}
It will display a confirm dialog with "Leave page" and "Stay on page" buttons.
Moreover, there is also the unload event, but it's as unreliable as beforeunload. And both of them don't work well on mobile devices.
Probably a good idea is not to rely on detecting the unloading of the page, but rather changes in visibility, via e.g. the pagehide event. It will also handle all cases when the user puts your page in the background and simply forgets about it.
A very detailed article about pagehide, beforeunload, unload and other similar events is available on Ilya Grigorik's site.
And if you want to detect only leaving the editor, you can probably just listen to CKEditor's blur event. It's fired when the user moves the cursor outside of the editor.

Prevent user from going to other tab on website

I'm not sure how you can do this, but if a user on my site enters some information and selects another link or tab without saving, I would like to present a popup and allow them to cancel that action. If the action is canceled, I want to prevent the user from going to the selected link/tab.
Can you actually do this? I've thought about using onuload javascript event but I'm not sure how you could prevent the action.
This is a ASP.net site using jquery.
It's a rather imperfect solution, but this is as close as I could get.
Add this event handler to your page:
window.onblur = function() {
var flag = confirm("Please don't leave! Click OK if you really want to leave. I hope you click cancel and stay with me.");
if (flag) {
window.onblur = undefined;
alert("Ok you can leave now. **sob**");
//The user is leaving. You can do a little cleanup here if you need to.
}
}
Note: No solution in the world will prevent a user from opening another browser. Or, better yet, picking up their mobile phone and browsing from there. You can't force the user to remain focused on your app.
I strongly suggest you rethink your UX design if it really is so fragile that you can't allow the user to multitask.

What's window.onunload?

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.

Extension dialogs: across-session info, "pre-load" event and how to center startup dialog?

I am working on a small extension for personal consumption and practice. What I would like to do is provide some information every time Firefox starts using a modal dialog. I know this is generally frowned upon, but this is mostly for know-how. I have a few question regarding some things---I feel like there are better ways to do them. Kindly share your wisdom:
I have created a small dialog XUL, and I have an event listener registered to the load event of the main window. To actually display the dialog, I use:
window.openDialog("chrome://myext/content/prompt.xul", "dialogname",
"chrome,dialog,modal,centerscreen,resizable", params).focus();
Problem 1: I can never get the start up dialog to be on the center screen (even if I have centerscreen enabled), it starts top left---it would be nice to have it in the middle---something like Firefox's password-on-startup request. How can I achieve that?
I would like the modal window to open only once per session, even if there are multiple instances of Firefox. What I have done to accomplish that is, once the dialog runs, I set an extension preference, and I check that before opening another dialog on the "load" event of any new window.
Problem 2: To make sure I somehow don't have preferences set from a previous session, I try to check if this is the first window opened, and if so, I reset the preferences. Just to be safe, I also reset them on the unload event of the last window that closes. To discover the first/last load and unload, I use the nsIWindowWatcher service, and see if I can traverse the returned enumerator:
var ww = Components.classes["#mozilla.org/embedcomp/window-watcher;1"]
.getService(Components.interfaces.nsIWindowWatcher);
var en = ww.getWindowEnumerator();
var win1 = en.getNext();
//if there is no more en.getNext(), then this is the 1st window
There has to be a better way to do this, no? Some event which only fires once per session (not per window) for example?
If the dialog box is cancelled, I want Firefox to close down. Right now, I accomplish that through a simple window.close() associated with the cancel button of the dialog. However, since the original load (which triggered the modal dialog) is called after the page finishes loading, I can see a small glimpse of the homepage before it closes due to window.close()---this is not elegant. Is there an event similar to "before_page_load"? What is the proper way to accomplish this goal.
Once again, this is mostly for personal use, so kindly ignore the usability factor of a startup modal dialog.
You probably need to observe the final-ui-startup notification, which happens before the main window opens. You do this by registering a component to observe the profile-after-change notification, then during that notification, add yourself to observe the final-ui-startup notification. When your component subsequently receives that notification, it can then open your modal dialog and subsequently quit the application if necessary.

Categories