2010-08-13 3 views
7

J'ai un site qui utilise beaucoup de JavaScript (principalement jQuery) et j'ai besoin d'un moyen globalement agréable de faire savoir à l'utilisateur qu'il perdra des changements non sauvegardés quand il s'éloignera une page particulière.Meilleure pratique pour avertir l'utilisateur qu'il va perdre des données

Pour le moment j'ai un événement onchange placé sur les entrées et envelopper ma navigation principale dans une fonction qui affichera l'avertissement quand on clique dessus.

Cela se sent vraiment maladroit et n'échelle pas bien (navigation qui ne fait pas partie de la navigation principale doit être emballé manuellement, ce qui est loin d'être idéal)

+0

Vive la vérification orthographique GenericTypeTea! – Toby

+0

C'est bon. Je suis un peu OCD quand il s'agit de personnes qui écrivent au lieu de perdre. – GenericTypeTea

Répondre

5

J'ai un onchange événement sur mes entrées et définir une variable isDirty à vrai quand ils changent.

Puis-je utiliser pour avertir l'utilisateur événement onbeforeunload sur les modifications non enregistrées:

var isDirty = false; 

window.onbeforeunload = function (evt) { 
    if (isDirty) { 
     return 'If you continue your changes will not be saved.'; 
    } 
} 
+0

pourquoi ne pas simplement vérifier si isDirty est vrai plutôt que d'avoir une fonction séparée pour le faire? – user353297

+0

@ mel33t - Je suis. – GenericTypeTea

+0

Vous devez avoir édité vos réponses parce que je pourrais jurer la ligne lire "if (checkIsDirty()) {" (ou quelque chose de similaire). – user353297

5

Vous êtes à la recherche de l'événement onbeforeunload.

comme

$(window).bind('beforeunload', function(){ 
    return "Are you really sure?"; 
}); 

natif:

window.onbeforeunload = function(){ 
    return "Are you really sure?"; 
}); 

C'est bien sûr que la "méthode prévention". Vous avez toujours besoin de logique pour savoir s'il y a eu des changements sur votre site. Cela pourrait facilement être fait en utilisant un boolean par exemple. En outre, vous devez faire une détection rapide comme

if('onbeforeunload' in window){} 

Je pense que tous les principaux navigateurs prennent en charge l'événement de nos jours, mais il y a encore le navigateur qui ne connaissent pas cet événement. Donc, si la condition ci-dessus échoue, vous pouvez toujours vous replier gracieusement d'une autre manière.

+1

+1. Pour la gentillesse, bien sûr, ayez une sorte de drapeau que vous pouvez vérifier et n'ouvrir la confirmation que s'il y a * des * changements non enregistrés qui seraient perdus. Notez que SO lui-même le fait (commencez à taper et répondez et essayez de vous en sortir ...). –

0

Utilisé sur l'événement de fenêtre on unload pour intercepter lorsque la page va changer. Invitez ensuite une alerte Lightbox pour avertir l'utilisateur si la navigation hors de toute donnée non enregistrée sera perdue.

Questions connexes