Perte du formatage CSS lors de la génération de balise par du javascript

**Ptikir** · 14/03/2019, 09h40

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.

Nom : styleCSS.png
Affichages : 163
Taille : 5,7 Ko

Nom : styleCSS.png
Affichages : 163
Taille : 5,7 Ko

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é · 14/03/2019, 11h48

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** · 14/03/2019, 12h18

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** · 14/03/2019, 14h48

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é · 14/03/2019, 15h09

@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** · 14/03/2019, 16h36

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

Invité · 14/03/2019, 16h50

Un <select> ne se stylise pas "comme ça", si facilement.

Là, ce n'est pas QUE du CSS :

ce sont des <div> et autres qui SIMULENT la liste déroulante.
le <select> lui-même est en display:none;
Exemple ici (regarder le code source généré : "Ctrl"+"U").

La pseudo-liste déroulante est BEAUCOUP plus facile à styler en CSS (puisque ce sont des <div> et autres).

Du moins, c'est ce qu'on peut supposer en regardant l'image fournie...
Je me trompe peut-être (mais j'en doute).

**Ptikir** · 15/03/2019, 09h48

Merci pour vos réponses.

Alors comme dit, je n'ai pas une très grande connaissance du développement Web, étant Coboliste. Donc je ne comprends pas tout ce que vous me dites.

Alors j'ai bien un choosen.jquery dans mes "scripts" de début de page. Je ne sais pas comment on fait pour désactiver ou réactiver ce plugin (et je ne pense pas que j'utilise Ajax).
Toujours est-il qu'en supprimant la ligne

Code html :

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

<script src="../c&p/js/chosen.jquery.min.js" type="text/javascript" language="javascript"></script>

je perds le formatage du CSS sur mes deux listes et plus seulement sur la 2ème.

Alors j'ai changé ma page pour ne plus avoir le problème, je charge ma 2ème liste directement et non plus au changement de valeur de la 1ère liste.

Mais si vous pouvez m'expliquer comment on réactive le plugin je peux essayer car j'ai gardé le code et ça pourra aider d'autres personnes

Invité · 15/03/2019, 10h47

Bonjour,

OK.
Après la ligne 70 du script JS, ajoute :

Code :

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

   $('#selDateEffet' + index).chosen();

N.B. En effet, tu n'utilises pas Ajax, mais tu crées le <select> "à la volée" (dynamiquement).
Il n'est pas présent dans le DOM au chargement de la page, et n'est donc pas pris en compte par le ".chosen()" initial (qui doit se trouver quelque part dans un script JS).

**Ptikir** · 15/03/2019, 10h51

Super, ça marche !

Merci beaucoup !

Perte du formatage CSS lors de la génération de balise par du javascript

jQuery

Discussions similaires

Partager

Partager