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

Vue hybride

Discussions similaires

Partager

Partager