Discussion :

[Ptikir]

Bonjour à tous,

Je ne suis pas du tout expert en langages Web, et je ne sais pas trop si mon soucis vient de HTML ou Javascript.
Je vais essayer d'expliquer au mieux mon problème.

J'ai un formulaire HTML avec un nombre indéterminé de listes déroulantes. Elles sont toujours liées par paire (1 = "Fréquence de prélèvement"; 2 = "Date d'effet").
Au changement de valeur de la première liste, je veux mettre à jour la seconde selon le choix de la première. Alors ça fonctionne plutôt bien, car au changement de valeur de ma liste "Fréquence de prélèvement" j'obtiens les valeurs que je souhaite dans ma liste "date d'effet". Le problème étant que je perds mon style CSS. Enfin c'est l'impression que j'ai. Voir Image ci-dessous.



Voici le code HTML de ma form

Code HTML :

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
 
<? $i++; ?>
<table border="0" cellspacing="0" cellpadding="0" align="center" class="tab03">
<caption>&nbsp; Contrat &nbsp;</caption>
    <tr>	
        <td>Fréquence de prélèvement</td>
	<td colspan="9" >
	    <select id="frequence<? echo $i ?>" name="frequence<? echo $i ?>" onchange="dateEffet(<? echo $i ?>);">
		    <option value="M" <? if ($resultat["fractionnement"]=="M"){ echo 'selected = "selected"';}?>>Mensuel</option>
		    <option value="T" <? if ($resultat["fractionnement"]=="T"){ echo 'selected = "selected"';}?>>Trimestriel</option>										
	    </select>
	    <input type="hidden" name="frequence_old<? echo $i ?>" size="1" value="<? echo $resultat["fractionnement"];?>">
	    <input type="hidden" name="contrat<? echo $i ?>" size="1" value="<? echo $resultat["type_con"];?>">
	</td>
    </tr>
    <tr id="dateEffet<? echo $i ?>">
 
    </tr>
</table>

Ma fonction Javascript "dateEffet()" appelée est la suivante

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
70
71
72
73
74
75
76
	<script type="text/javascript">
	function dateEffet(index){
		var choix = document.getElementById("frequence" + index).value;
		var frequence_old = document.forms['contact'].elements['frequence_old' + index].value;
		var liste ="";
		if (choix != frequence_old){
			var date = new Date();
			var mois = date.getMonth()+1;
			var annee = date.getFullYear();
			var i;
			var j;
			var k = 1;
			var mois_var = "";
			liste = '<td>Date d\'effet voulue</td><td colspan="9"><select id="selDateEffet' + index + '" name="selDateEffet' + index + '">';
			if(choix == "M"){
				//Si on est en décembre le 1er choix de la liste sera le janvier de l'année N+1
				if(mois == 12){
					mois = 1;
					annee++;
				}else{
					mois++;
				}
				var anneeMax = annee + 1;	//On détermine l'année maximum
				for(i = annee; i <= anneeMax; i++){
					for(j = mois; j < 13; j++){
						if(j < 10){
							mois_var = "0" + j;
						}else{
							mois_var = j;
						}
						if(k == 1){
							liste += '<option value="' + i + mois_var + '01" \'selected = "selected"\'>01/' + mois_var + '/' + i + '</option>';
						}else{
							liste += '<option value="' + i + mois_var + '01">01/' + mois_var + '/' + i + '</option>';
						}
						if(j == 12){	//Si on se trouve sur la dernière occurence de l'année on indique que le mois de l'année suivante est janvier
							mois = 1;
						}
						k++;
					}
				}
			}else if(choix == "T"){
				//A partir d'octobre on se place sur l'année suivante
				if(mois >= 10){
					mois = 1;
					annee++;
				}
				var anneeMax = annee + 1;	//On détermine l'année maximum
				for(i = annee; i <= anneeMax; i++){
					for(j = mois; j < 13; j = j + 3){
						if(j < 10){
							mois_var = "0" + j;
						}else{
							mois_var = j;
						}
						if(k == 1){
							liste += '<option value="' + i + mois_var + '01" \'selected = "selected"\'>01/' + mois_var + '/' + i + '</option>';
						}else{
							liste += '<option value="' + i + mois_var + '01">01/' + mois_var + '/' + i + '</option>';
						}
						if(j == 10){	//Si on se trouve sur la dernière occurence (octobre quand on est en trimestriel) de l'année on indique que le mois de l'année suivante est janvier
							mois = 1;
						}
						k++;
					}
				}
			}
			liste += '</select></td>';
			alert(liste);
			document.getElementById('dateEffet' + index).innerHTML = liste;
		}
		else{
			document.getElementById('dateEffet' + index).innerHTML = '';
		}
	}
	</script>

Donc avec ce code, Je perds mon style CSS comme indiqué sur l'image précédente. Je ne sais pas pour quelle raison...

J'ai essayé de changer mon code pour créer le <select id="selDateEffet"<? echo $i ?> dans mon code HTML et de juste alimenter les balises <option> avec ma fonction javascript mais ça ne fonctionne pas du tout...

Si quelqu'un a une idée.

Merci d'avance.

[Invité]

Bonjour,

ce n'est pas le formatage CSS, mais certainement un plugin JS, qui modifie l'aspect des listes déroulantes.

Avec une page en ligne, on pourrait en dire plus.

[Ptikir]

Impossible de fournir une page en ligne, car il y a des sessions.

En tout cas, merci de votre réponse, je vais regarder dans ce sens.

[SpaceFrog]

regarde le code source généré AVANT la modif par js, et en particulier si l'element à une class ...
rajoute cette class avec js ...

[Invité]

@SpaceFrog

Je pense qu'il s'agit plutôt d'un plugin, comme : chosen (jQuery)

Auquel cas il faut "réactiver" le plugin APRES le passage par Ajax (ou comme ici, après la création du <select> via JS)

[SpaceFrog]

@Jr => Oui si tu veux toutes les fonctionnalités dues au plugin ...
là il parle juste du css :grin: