WordPress style save confirmation

WordPress heeft bij het bewerken of aanmaken van een nieuwe blogpost een melding die je om bevestiging vraagt als je probeert de pagina te verlaten zonder iets op te slaan. Nooit echt bewust over nagedacht maar leek me een leuke toevoeging qua user experience in een nieuw project. Even een beetje nagedacht hoe ik dit in mijn Jquery wereld kon “opbergen” zonder dat het in de weg zou zitten en kwam met de volgende oplossing;

// Set the default state to false
jQuery.data(document.body, 'confirmationPrompt', false);

// On a keypress in any form field set confirmation to true
$('input,textarea').keypress(function() {
   jQuery.data(document.body, 'confirmationPrompt', true);
});

// On change of a select or any other form element (like radio buttons etc)
// Set confirmation to true
$('input,select').change(function() {
    jQuery.data(document.body, 'confirmationPrompt', true);
});

// On any form submit set confirmation to false
$('form').submit(function() {
    jQuery.data(document.body, 'confirmationPrompt', false);
});

// Check if confirmation is needed before unloading
window.onbeforeunload = function(){
    if(jQuery.data(document.body, 'confirmationPrompt')){
        return 'Are you sure?';
    }
};

Dit dekt op zich aardig de lading zo. De reden dat ik jquery.data() gebruik en niet gewoon een losse variabel is dat ik op deze manier ook vanuit andere functies de confirmationPrompt var op false kan zetten. Bijvoorbeeld als je sommige forms middels een AJAX call opslaat waardoor er geen formele form submit voorbij komt.

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *