Remove beforeClose event handler - jQuery UI Dialog

Question

I have a jQuery UI dialog box with a form inside it. I'm trying to implement a feature where if a field in the form has been modified, we'll be showing a confirmation message using noty

Now, unlike an javaScript confirmation box, noty does not stop script execution. So, in the dialog beforeClose event, I'm -

Showing a noty confirmation if form data is modified and then returning false. Simply returning true if the form data has not been modified.

All is working well. Now we ask the user -

The data in the form has been modified. Are you sure you want to close?

If he clicks no - we simply close the noty and keep the dialog box open. But if he clicks yes, we try to close the dialog box, which triggers the beforeClose event handler again and we go into the loop again.

I've tried calling .off on the div that has been converted to a dialog box before calling the close event, but that doesn't seem to be removing the click.

Here is a simple pseudo code to explain the issue -

DialogCloseEvent() {
    if data has been modified { 
        Show noty {
            // IMPORTANT - This is executed after return false.
            in noty user clicks NO - do not close dialog box {
                close noty and done
            } 
            in noty user clicks YES - close the dialog box {
                // This calls the DialogCloseEvent again.   
                call the close method of the dialog box.            
                close noty
            }
        }
        return false
    }   
    no it has not been modifed {
        // Closes the dialog without calling the event again
        return true;
    }
}

Answer 1

Expanding on your pseudo code you could add a flag to force close the dialog:

var forceClose = false;

DialogCloseEvent() {
    if data has been modified and !forceClose  { 
        Show noty {
            // IMPORTANT - This is executed after return false.
            in noty user clicks NO - do not close dialog box {
                close noty and done
            } 
            in noty user clicks YES{ 

                forceClose = true;

                - close the dialog box {
                    // This calls the DialogCloseEvent again.   
                    call the close method of the dialog box.            
                    close noty
                }
            }
        }
        return false
    }   
    no it has not been modifed {
        // Closes the dialog without calling the event again
        return true;
    }
}

UPDATE with code

var forceClose = false;

$("#dialog").dialog({
    open: function (event, ui) {
        forceClose = false; //reset the flag each time
    },
    beforeClose: function (event, ui) {
        if(forceClose){
            return true;
        }

        //your dialog close event
        //set the flag to true when you want to close the jqueryui dialog

    }
});