IE7 et onbeforeunload KO

**aperrin** · 17/09/2008, 15h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**le_chomeur** · 17/09/2008, 16h11

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

**aperrin** · 18/09/2008, 11h37

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 ?

**le_chomeur** · 18/09/2008, 11h47

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.

**Bovino** · 18/09/2008, 11h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**le_chomeur** · 18/09/2008, 12h53

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 ^^

**aperrin** · 19/09/2008, 14h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

IE7 et onbeforeunload KO

JavaScript

Discussions similaires

Partager

Partager