Adding a js confirmation before navigating away from settings menus#10927
Adding a js confirmation before navigating away from settings menus#10927anukasha-mo wants to merge 1 commit intoWordPress:trunkfrom
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
| /** | ||
| * Warn the user if they have unsaved changes. | ||
| * | ||
| * The browser will show a native confirmation dialog when the user | ||
| * attempts to leave the page with unsaved changes. | ||
| */ | ||
| $( window ).on( 'beforeunload', function() { | ||
| // Skip warning if form is being submitted or content hasn't changed. | ||
| if ( isSubmitting || ! $form || ! $form.length ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( originalFormContent !== $form.serialize() ) { | ||
| return __( 'The changes you made will be lost if you navigate away from this page.' ); | ||
| } | ||
| } ); |
There was a problem hiding this comment.
This will break bfcache. The beforeunload should only be added once a field is modified. See https://web.dev/articles/bfcache#beforeunload-caution
For example, add a delegated event listener for the change event. For example:
document.addEventListener( 'change', () => {
window.addEventListener( 'beforeunload', () => {
// Check if the original form content is not the same as the current form content.
} );
}, { once: true } );
| } | ||
| } ); | ||
|
|
||
| }( jQuery ) ); |
There was a problem hiding this comment.
Let's avoid using jQuery unless we have to.
| return; | ||
| } | ||
|
|
||
| if ( originalFormContent !== $form.serialize() ) { |
There was a problem hiding this comment.
You can use FormData as an alternative to this jQuery API.
| '<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>' | ||
| ); | ||
|
|
||
| wp_enqueue_script( 'user-profile' ); |
There was a problem hiding this comment.
Why not enqueue user-profile anymore?
|
|
||
| $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 ); | ||
|
|
||
| $scripts->add( 'options', "/wp-admin/js/options$suffix.js", array( 'jquery', 'wp-i18n' ), false, 1 ); |
There was a problem hiding this comment.
This handle seems overly generic.
2 participants
Trac ticket: https://core.trac.wordpress.org/ticket/64623