Pop up a confirm box

Question

My project is a single page site build using jquery and html.

In my project i have a lot of creation and updation forms and these are managed by showing and hiding divs,elements loading and removing of html's.

I want to add a functionality in my project that pops up a confirm box whenever a creation or updation page is left.

I mean when a user is creating something and he clicks on a menubar(purposefully or by mistake) then a confirm box should pop up saying

Are you sure you want exit ?

I tried

window.onbeforeunload

but it doent work for me.

now as the elements are getting loaded and removed dynamically and the page is not redirected hence i cannot use this method..

any suggestions ?

window.confirm: https://developer.mozilla.org/en-US/docs/Web/API/Window.confirm — Fabrizio Calderan, Jan 20 '14 at 09:02
https://developer.mozilla.org/en-US/docs/Web/API/Window.confirm — Netorica, Jan 20 '14 at 09:02
your answer is [this post](http://stackoverflow.com/questions/11290780/window-onbeforeunload-in-javascript), Please do a better search :) — amity, Jan 20 '14 at 09:03
and [Alert when browser window closed accidentally](http://stackoverflow.com/questions/1244535/alert-when-browser-window-closed-accidentally) — Felix Kling, Jan 20 '14 at 09:03
but how to i check if it one is creating or updating a particular thing? — Saurabh, Jan 20 '14 at 09:04
You mean whether someone made changes to a form? You'd bind event handlers to the fields and then set a flag which indicates whether changes have been made or not. — Felix Kling, Jan 20 '14 at 09:13
in a way it is a single page site.so everthing is managed through showing hiding removing loading so there are so many ways a user can cancel a creation or updation and i cannot check everywhere these things.So i imagined if i could do something on the creation or updation div but i think it cant be helped — Saurabh, Jan 20 '14 at 09:21

score 0 · Answer 1 · answered Jan 20 '14 at 09:03

0

You can use a simple prompt, but for something a little more fancy - and almost as simple check out JQuery Dialog:

http://jqueryui.com/dialog/

It requires JQuery UI though.

answered Jan 20 '14 at 09:03

Patrick Geyer

1,515
13
30

jQuery + jQuery UI for a basic window.confirm ? You can't be serious. – Silviu Burcea Jan 20 '14 at 09:06
@SilviuBurcea why not, it looks good? Saurabh might use UI for other things as well as that. – Patrick Geyer Jan 20 '14 at 10:13
You don't bring so many resources for a confirmation. If you do that for this trivial task, I wonder how many resources do you have for a serious task. – Silviu Burcea Jan 20 '14 at 10:29

score 0 · Answer 2 · answered Jan 20 '14 at 09:04

0

you have to trigger a dialog on window unload method

$( window ).unload(function(e) {
  alert( "unload() called." );
  // aa is any condition
  if(a)
  {
    return true;
  }
  else
  {
    e.preventDefault();
  }
});

the unload() function calle if you navigate from the page...

answered Jan 20 '14 at 09:04

ReNiSh AR

2,782
2
30
42

`.unload()` is deprecated @ `version : 1.8`. – Jai Jan 20 '14 at 09:11

score 0 · Answer 3 · answered Jan 20 '14 at 09:06

First solution is with jQuery Dialog - http://jqueryui.com/dialog/ Another is to use Javascript confirm() - http://www.w3schools.com/jsref/met_win_confirm.asp But with jQuery Dialog you can setup it how you want (add css, more buttons, title, etc.). With Javascript Confirm() you can only select events and text in dialog.

score 0 · Answer 4 · answered Jan 20 '14 at 09:10

0

window.onbeforeunload = function() {
    if( form.hasUnsavedChanges() === true ) { // or other conditions you need
        return 'Are you sure you want exit ?';
    }
};

answered Jan 20 '14 at 09:10

Tschitsch

1,253
8
18

Pop up a confirm box

4 Answers4