Checking if form is "dirty" in iframe

Jira Development Jira Cloud
, ,
1

My team is developing an Atlassian Connect app for Jira. Our iframe is loaded to an admin page (by using adminPages module).
The iframe contains a form with some input fields (filled with default values) with a “Save” and “Close” button. I’d like to know if it’s possible to check if the form is “dirty” (any changes were made) and show a confirmation popup when any of these events happen:

  • refresh button of the browser is clicked (or F5 is pushed)
  • “back” (previous page) button of the browser is clicked
  • custom “Close” button is clicked
  • any Jira navigation menu item is clicked
  • tab is closed
  • another URL is entered in the address bar

Essentially any event that could lead to loss of data entered in the form.

Currently I’m using a similar code in the iframe, but it does not cover all the above cases (as the referenced window object is the iframe itself):

$(window).bind('beforeunload', function(){
	return '';
});

Do you have any suggestions?

2

We use code that looks like this:

    window.addEventListener('beforeunload', (e) => {
        if (unsavedChanges()) {
            const dialogText = 'Changes that you made may not be saved.';
            e.returnValue = dialogText;
            return dialogText;
        }
    });

Not sure if it catches ALL of your events but it does for most of them.

1 Like