IE7 et onbeforeunload KO

Version imprimable

Bonjour
Je souhaite avertir l'utilisateur lors de la sortie d'un formulaire avec des données non enregistré, en ne passant pas par les boutons standard valider annuler (en cliquant directement sur le menu par exemple).
Voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <head> <script type="text/javascript"> function alerteChangementPage(){ if(modif==true) return confirm('Les modifications non sauvegardées ne seront pas conservées.') ; } function switchModification(){ if(modif == false) { modif = true; } } </script> </head> <body onbeforeunload="return alerteChangementPage();" onchange="javascript:switchModification()"> ....
Cela marche sur firefox 3 mais pas sur IE7.

Quelqu'un à t-il une idée ?

17/09/2008, 16h11
le_chomeur

essaye :

window.onbeforeunload = alerteChangementPage;
plutôt que sur le body ;)

de plus je ne suis pas certain que la méthode onchange fonctionne sur le body ;)
18/09/2008, 11h37
aperrin

Citation:

de plus je ne suis pas certain que la méthode onchange fonctionne sur le body

Sur ff 3 si.
Mais évidemment cela ne marche pas sous IE7.
Y a t-il une solution pour déterminer si un changement à eu lieu (équivalent d'un window.onchange) dans une page sous IE7 ?
18/09/2008, 11h47
le_chomeur

non , il te faut récupérer la valeur de tes champs au load de ta page , puis vérifier les valeurs au moment ou tu quittes.

Tu peux initialiser un flag au chargement, puis dans les éléments susceptibles de changer, tu mets le onchange qui met à jour le flag, du style :
Code:

1 2 3 4 5 <script type="text/javascript"> var page_changee = false; document.getElementById('ton_champ_qui_change').onchange = function(){page_changee=true;} window.onbeforeunload = if(page_changee){alerteChangementPage}; </script>

18/09/2008, 12h53
le_chomeur

j'avais pensé au flag, mais si l'utilisateur , annule sa modification ( exemple ctrl+z )
le flag sera a true alors que la page contient bien les données d'origine ^^

Voici une solution complète et qui marche sous IE7 et FF3 :
Avantage c'est que les événements sont ajoutés par programmation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
 <script type="text/javascript">
/* <![CDATA[ */ 
 
/////////////////////////////////////////////////////////////////////////////////
	// Partie nécessaire pour afficher un message
	// si l'utilisateur quitte une page
	// ou il y a eu des changements
	////////////////////////////////////////////////////////////////////////////////
 
	var isPageModified = false;
 
   	function setPageModified(){
  		if(isPageModified == false) {
			isPageModified = true;
			// alert('setPageModified');
		}
	}
 
    window.onbeforeunload = function (e) {
		message = 'Les modifications non sauvegardées ne seront pas conservées.';
			var e = e || window.event;
		if(isPageModified == true) {	
			// For IE and Firefox
			if (e) {
				e.returnValue = message;
			}
 
			// For Safari
			return message;
		}
	};
 
// Cette partie avec prototype permet de
// lister les élements dom du formulaire et d'ajouter un
// évenement  onchange sur chaque élement (input, case à cocher, ...)
Event.observe(window, 'load', function(){
	var listeElement = Form.getElements(document.forms[0]);
	$A(listeElement).each(function(element) {
		// alert('element : ' + Element.inspect(element));
		Event.observe(element, 'change', setPageModified);
	});	
});			
 
/* ]]> */
</script>

Évidemment comme fait remarqué auparavant si l'utilisateur , annule sa modification ( exemple ctrl+z ) le flag sera a true alors que la page contient bien les données d'origine.
De plus si des élements sont ajoutés par programmation alors il ne dispose pas de l'événement onchange.
Enfin il faut ajouter isPageModified = false; sur les boutons sur lesquels on ne veut pas voir apparaître la boite de dialogue.