0

I have a jquery dialog and it has some Kendo textboxes, dropdownlists and comboboxes. I want it to warn users before closing the dialog with unsaved changes if users made changes. It currently does warn when I make some changes and try to close the modal. But the thing is, it just warns all the time if I even change one text box click on other text boxes to edit. I just want it to warn users only once when they finish modifying and try to close the dialog.

Here is my code

    $('.ui-button').mousedown(function () {
        if ($(":input").change(function (e) {
            var dirtyFlagMsg = confirm('Are you sure you want to close without saving?');
            if (dirtyFlagMsg == true) {
                $("#popUpEdit").dialog("close");
                $("#popUpNew").dialog("close");
            }
            else e.preventDefault();
        }));
    });
3
  • Can you please post your html structure.
    – KHansen
    Feb 27, 2020 at 5:28
  • It just starts with <div id="popUpEdit" title="Update Existing Information" style="display:none;"> popUpEdit is the modal and it includes a lot of @(Html.Kendo().TextBox() and combobox, dropdownlists and so on.
    – davis
    Feb 27, 2020 at 14:40
  • And I'm handling everything in jQuery just using id="popUpEdit". so I think doing something in html won't help
    – davis
    Feb 27, 2020 at 14:46

2 Answers 2

2

onbeforeunload is the event that will help you asking user if he want to leave page or not.

function myFunction() {
  return"";
}
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>TRY CLICK LINK</p>

<a href="https://www.google.com"> go to another page</a>

</body>
</html>

8
  • 1
    yes ,it is window event and the string "" is nothing .you can add some logic instead replacing return .
    – Ricky
    Feb 27, 2020 at 7:13
  • 1
    Ok and why do you have to set the value of onbeforeunload to: "return myFunction()" instead of just: "myFunction()" and how do a function that does nothing except return an empty string cause that message to appear?
    – Doomer
    Feb 27, 2020 at 7:16
  • 2
    nice question ,I am providing you the link where you can get information about this window event . developer.mozilla.org/enUS/docs/Web/API/Window/…
    – Ricky
    Feb 27, 2020 at 7:19
  • 1
    The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.
    – Ricky
    Feb 27, 2020 at 7:20
  • 1
    Not to my knowledge, it's like the alert(), confirm() and prompt() methods, it cannot be styled.
    – Doomer
    Feb 27, 2020 at 7:25
0

First of all, You are mixing pears and apples, jquery dialog and onbeforeunload are two diferent things. I think you want to close the dialog and not the window (title of question is misleading).

You don't need to track every mousedown event, you need to call function on dialog before close event.

In beforeClose event of dialog check it there is dirty fields, if there is a dirty fields pop up confirmation message, otherwise return true and dialog will call close event.

Something like this (not tested):

$("#dialog").dialog({
   beforeClose: function(){
     var isDirty = //logic for dirty check of inputs
     if(isDirty){
        if(confirm("Are you sure you want to close without saving?")){
            return true;
        } else {
            return false;
        }
     }

     return true;
   }
});

Of course im using plain browser confirmation so you will need to use your own logic for dialog confirmation. Hope it helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.