Close event on browser - javascript

I am using a jQuery Notification on my project.
When i close the browser , i am using the onbeforeunload and showing a confirm box to the user.
However the client is not satisfied with the default message box ,
is it technically possible to show my Notification instead of the default one.
jQuery notification comes with a question Do you want to close ? and with two buttons YES and No.
When user clicked YES it will return true ,else False
any way to achieve ? or some comments/opinion ?
Please help me .
Thank you.
Update :
window.onbeforeunload = ShowModel;
function ShowModel()
{
return show_pop_up();
}
show_pop_up()
{
return TRUE or FALSE ;
}

is it technically possible to show my Notification instead of the default one.
No. You can specify the text of the message. You cannot control the buttons, you cannot control the appearance, and you cannot replace the UI with one built from scratch out of HTML/CSS/JS.
There are very strong limitations over what you can do while the user is trying to leave the page. Browsers are designed to protect users from sites that attempt to trap them (You are trying to leave the site? NO! You are not allowed to leave until you have looked at more adverts for porn and you given us your credit card details!).

It is possible to show your notification instead the default. Try this:
$(window).on('beforeunload', function() {
return 'Do you really want to close this window? Some your text...';
});
But it's true, you can't limit user's actions with browser's window.

Technically its not possible to override the default UI.
There are two kind of page leave events can occur.
One is to navigate within the same website by clicking the links. For this kind of page unload, you could be able to write the onclick for all the menu links to show the warning message as you wish with the UI styles. But when you click links, you MUST stop the call for the beforeunload event.
The second one is to navigate outside the website using the browser buttons/address bars. Here you can't override the default UI.
The best example is Facebook. When you type the status and before submit, if you try to navigate within FB, you'll be getting a nice UI warning message. But when you close the window, you'll get the default one.
Hope this helps.

Related

How to prevent multidocument form page from reloading?

I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.
Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.
Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.
You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers

Web Design - Modal CSS Change to Display Block on Site Exit

I am trying to implement an easy way of displaying a small modal window when the user exits my Website, containing a quick and easy single question dialog, with a multiple-choice answer, and a submit button..
I'm having trouble finding a simple, straight-forward answer everywhere I've looked. Yes, I searched.
NOTE: I already have my Modal Window created, with the Form on it, and everything ready! (currently the Modal Window is set to Display None, until I figure out the following question)..
What I need to know exactly is this: What is the easiest way to simply detect when the user is leaving my website, and set the Property of the Modal Window ID to Display:Block for example, which would change it from Display:None and make it show?
I would prefer a simple script being able to detect any of the following behavior as they are trying to exit the website either by (A) clicking X on the tab, (B) clicking X on the window, or (C) hitting the back button enough times to leave my Site - at which time, the script would change my Modal's ID property from display none, to display block.. Thats it.
Thanks in advance!
JavaScript has a special event for this onbeforeunload
<script>
window.onbeforeunload = exitFunc;
function exitFunc() {
modal logic here
}
</script>

Trigger an on-click overlay automatically once per user per ip

Like the title suggests, I have an overlay modal window on one of my websites. It fires every time a user clicks on a specific button. Am I able to somehow trigger that specfic button automatically once per user/ip so I can display that modal at least once for everyone, even if they don't click it? It's a good way to increase social-media fans and I noticed many websites are using this method. Is there any script that simply does that? I will provide code if necessarly although I don't see how it can help since this is more like a general matter.
Okay, looks like you want two things...
to trigger the modal to show regardless of whether the user clicks or not
window.load(function () {
//execute your modal popup here.
});
Note: You'll need JQuery for this.
to limit the window to only appearing once per user.
If your users are using a login, I'd suggest creating a new table for promos, possibly named, 'UserPromos' and create a bit field for this modal like, 'modalshown' and set it to false '0', for all users. Then, merely send that value to your page in a hidden input field, access that value from JS and if that value is '0' then show the modal with your script above and if it's '1' then don't.
Your server side code would update the value for the UserPromos.modalshown for that user in the db.
If your users are just visitors to the site, then you must use a JS cookie.

Show custom message and button text for javascript confirm dialog?

Is it possible to give custom message for buttons instead of Cancel/Ok and give my own text?
I saw lots of tutorials on replacing js confirm with jquery dialog. But isn't there a way with using native JS? I see the same thing done in Grooveshark and many other pages; when user wants to navigate away from their page user is prompted with a js dialog box with custom buttons like 'Stay on page/Leave page'?
Any idea how they might be implementing this? Their dialog box appears as if generated using native JS!
I believe you were seeing a slightly different dialog box.
Add this to your page:
window.onbeforeunload = function() {
return "Are you sure you want to navigate away?";
}

Confirm dialog box on unload/exit UNLESS the back button is pressed?

I have some simple code to display a confirm dialog box when the user tries to leave my form:
window.onbeforeunload = askConfirm;
function askConfirm(){
return "Your answers will be lost.";
}
But this is a multi-page form and they frequently press back to change some values on a previous page.
But when they do this dialog box still comes up.
Is there a way around this?
The answer I would suggest unfortunately doesn't actually answer your question but is a solution of a kind. The only possible solution here, imv, is to make sure that a user clicking the back button doesn't actually create an issue by storing the form answers from all pages. In the case of PHP I would store them in a session ($_SESSION). You have to recognise that users use the back button more than any other UI element within a browser. If your form truly has to be across a number of pages then you need to make sure the data they have entered is persistent across all these pages. I would actually provide a navigation for this within your own interface. Provide a clear sequential process visually and allow instant navigation through this process where possible.
I don't see a way to specifically detect whether the user pressed "back" or any other browser button. This is outside the site's scope.
Only one solution comes to mind: Show the confirmation dialog only when a global flag has been set to "true".
if (ask_when_exiting == true)
return "Your answers will be lost.";
You would have to set the variable to true? in the onclick event of every link that you want the confirmation to pop up for. You should be able to mass apply this event to every link on your page using JQuery or another JS framework (Seomthing like $$('a').each()....).
However, this will disable the confirmation for reloading the page, or any other event that is not triggered using a control on the page like typing in another URL or closing the browser, as well.

Categories

Resources