Incompatibilité avec IE et Safari

**youtch** · 23/04/2010, 11h14

Mon code est invalide avec IE et Safari : la fonction JS n'est pas lancée du tout car je n'ai pas la fenetre "alert()" qui se lance. Pourtant ça marche bien avec Firefox :
Est-ce un imbroglio lié aux déclarations de formulaires mal compris par IE ? Pourtant les div incorporés dans les form me semblent valides !

La partie XHTML :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script> 
</head>
<body >
 
<ul class='module1_ul'>
	<li class="module1_li1">Votre choix d'une date&nbsp;:
		<form id="form_module1" action="serv_aff_accueil.php" method="post">
		<div id='div_form_module1'>
		<select id='sidebar_choix1' name='sidebar_choix1'  onclick="surligne_choix('form_module1')"><option value='00'>00</option><option value='01'>01</option></select>
		/
		<select id='sidebar_choix2' name='sidebar_choix2'><option value='00'>00</option><option value='01'>01</option></select>
		/
		<select id='sidebar_choix3' name='sidebar_choix3'><option value='00'>2000</option><option value='01'>2001</option></select>
		</div>
		</form>
	</li>
	<li class="module1_li2">Votre choix d'une émission&nbsp;: 
		<br>
		<form id='form_module2' action="serv_aff_accueil.php" method="post">
		<div id='div_form_module2'>
		<select id='choix_emission' name='choix_emission'>
		<?php echo affich_emissions() /* Fonction php */?></select>
		</div>
		</form>
	</li>
	<li class="module1_li3">Votre choix d'un thème&nbsp;:
		<br>
		<form id='form_module3' action="serv_aff_accueil.php" method="post">
		<div id='div_form_module3'>
		<select id='choix_theme' name='choix_theme'>
		<?php echo affich_themes() /* Fonction php */?></select>
		</div>
		</form>
	</li>
</ul>
<input type='button' id='btn_valider_choix' name='btn_valider_choix' value='Rechercher'>
 
</body>
</html>
 
 
 
/* Le "onclick" de la ligne 5 signifie que j'ai testé avec en supprimant les "ecouteurs" qui suivent, sur 'sidebar_choix1' 
Mais tout le code suivant se rattache en temps normal au HTML :
<script langage='text/javascript'>
	// Observateur pour la mise en surbrillance des élément liés au selecteur choisi :  
	Event.observe("sidebar_choix1","change",function(){surligne_choix('form_module1');});
	Event.observe("sidebar_choix1","click",function(){surligne_choix('form_module1');}); 
	Event.observe("sidebar_choix2","change",function(){surligne_choix('form_module1');});
	Event.observe("sidebar_choix2","click",function(){surligne_choix('form_module1');});
	Event.observe("sidebar_choix3","change",function(){surligne_choix('form_module1');});
	Event.observe("sidebar_choix3","click",function(){surligne_choix('form_module1');});
 
	Event.observe("choix_emission","change",function(){surligne_choix('form_module2');});
	Event.observe("choix_emission","click",function(){surligne_choix('form_module2');});
 
	Event.observe("choix_theme","change",function(){surligne_choix('form_module3');});
 
Event.observe("choix_theme","click",function(){surligne_choix('form_module3');});
 
 
	// Observateur de validation d'un des formulaire
	Event.observe("btn_valider_choix","click",lancer_recherche);
</script>

Le code JS :

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
 
function surligne_choix(idForm)
{	alert(idForm); // Debug, qui s'affiche que sur Firefox !
	var a=new Array('div_form_module1','div_form_module2','div_form_module3');
	a.each(	function(elt){ $(elt).setStyle('border:0px; padding:5px; background:transparent'); } ); // Effacer les bordures
 
	switch(idForm) { // Afficher la bordure demandée :
		case 'form_module1': 
			$('div_'+idForm).setStyle('border: 2px solid #8fc513; padding:2px');
		break;
		case 'form_module2': 
			$('div_'+idForm).setStyle('border: 2px solid #9087bc; padding:2px');
		break;
		case 'form_module3': 
			$('div_'+idForm).setStyle('border: 2px solid #2c2c55; padding:2px');
		break;
	}
}

(Prototype 1.6.03 + scriptaculous 1.8.2)