Positionnement en AJAX / JQuery

**Zebulon777** · 12/09/2016, 15h42

Salut tout le monde,

j'ai un problème sioux en JQuery.

Je vous pose le problème : je lis le contenu d'un fichier XML et je lis 2 noeuds en même temps.

Voici une partie de mon fichier XML

Code xml :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
<CAPA>
	<MATRICE>
		<SECTION nom_section="Première section">
			<CELLULE nom_cellule="C_DATE_1"> <!--NE JAMAIS MODIFIER-->
				<NAME>C_DATE_1</NAME> <!--NOM DE LA CELLULE-->
				<LIB>Date : </LIB>
				<ELEMENT>DATE</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>CENTER</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin; Mettre le nombre de jours de décallage : 1, -1, -2, etc -->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier à charger sans extention et sans date "NomFic_" et pas "NomFic_JJMMAAAA.TXT"-->
				<FORMAT_NON_FIC></FORMAT_NON_FIC> <!--Voir commentaire au début-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L1C1"> <!--NE JAMAIS MODIFIER-->
				<NAME>L1C1</NAME> <!--NOM DE LA CELLULE-->
				<LIB>Nombre de posé pendant la P2</LIB>
				<ELEMENT>IMAGE</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT>100</VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE>500</VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE>1000</VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER>t_traj</FICHIER> <!--Nom du fichier à charger sans extention et sans date "NomFic_" et pas "NomFic_JJMMAAAA.TXT"-->
				<FORMAT_NON_FIC>AAAA_MM_JJ_nomdufichier</FORMAT_NON_FIC> <!--Voir commentaire au début-->
				<EXTENSION>txt</EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR>;</SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC>5007</LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC>3</COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE>ledblue-icone-7520-32.png</IMAGE> <!--Contient le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG>32</H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG>32</L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE>APRES</POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L1C2"> <!--NE JAMAIS MODIFIER-->
				<NAME>L1C2</NAME> <!--NOM DE LA CELLULE-->
				<LIB>ASMA CRNA</LIB>
				<ELEMENT>LIB</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier TXT à charger-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L2C1"> <!--NE JAMAIS MODIFIER-->
				<NAME>L2C1</NAME> <!--NOM DE LA CELLULE-->
				<LIB>ASMA TMA</LIB>
				<ELEMENT>LIB</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier TXT à charger-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L2C2"> <!--NE JAMAIS MODIFIER-->
				<NAME>L2C2</NAME> <!--NOM DE LA CELLULE-->
				<LIB>ATFM delay</LIB>
				<ELEMENT>LIB</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier TXT à charger-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
...
...
...
//La fonction qui créé les champs DATE
function CreationElementDate(P_NomTAB, P_Name, P_Lib, P_Align, P_ValInit) {
	WListeJ = P_Name + "_JJ";
	WListeM = P_Name + "_MM";
	WListeA = P_Name + "_AAAA";
	var WLigneDate = "<tr><td colspan='4'>";
	WLigneDate = WLigneDate + "<DIV " + P_Align +">";
	WLigneDate = WLigneDate + "<LABEL for='select'>" + P_Lib + "</LABEL>";
	WLigneDate = WLigneDate + "<SELECT name='" + WListeJ + "' id='" + WListeJ + "'>";
	WLigneDate = WLigneDate + "</SELECT>";
	WLigneDate = WLigneDate + "<SELECT name='" + WListeM + "' id='" + WListeM + "'>";
	WLigneDate = WLigneDate + "</SELECT>";
	WLigneDate = WLigneDate + "<SELECT name='" + WListeA + "' id='" + WListeA + "'>";
	WLigneDate = WLigneDate + "</SELECT>";
	WLigneDate = WLigneDate + "</DIV></td>";
	WLigneDate = WLigneDate + "</tr>";
	$('#'+P_NomTAB).append($(WLigneDate));
	Chargement_Listes_Jours(WListeJ);
	Chargement_Listes_Mois(WListeM);
	Chargement_Listes_Annee(WListeA, 2015);
	InitDate(WListeJ, WListeM, WListeA, P_ValInit);
}

Et voici mon code

Code javascript :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
var WIndex = 1;
var WIndexTab = 0;
$(xml).find('MATRICE').find('SECTION').each(
function() {  
	WNom_Section = $(this).attr('nom_section');
	//Création de la DIV dans la div DIVTAB_00
	var WDivTAB_00 = document.getElementById("DivTAB_00");
	var WNomDIV = "DivTAB" + WIndex;
	var WDiv = document.createElement("div");
	WDiv.setAttribute("id", WNomDIV);
//					WDiv.setAttribute("class", "CSSTableBleueCoinsArrondis");
//					WDiv.setAttribute("class", G_CLASSE_TAB);
//					WDiv.setAttribute("margin-bottom", "150px");
	WDivTAB_00.appendChild(WDiv);
	var WDivID = document.getElementById(WNomDIV);
	//Création de la table dans la DIV
	var WNomTAB = "Tab_CAPA" + WIndex;
	var WTable = document.createElement("table");
	WTable.setAttribute("id", WNomTAB);
	WTable.setAttribute("border", 1);
	WTable.setAttribute("cellspacing", 1);
	WTable.setAttribute("cellpadding", 1);
//					WTable.setAttribute("class", "Table_IE8"); // Définir la class pour les tables
	WDivID.appendChild(WTable);
 
	$(this).find('CELLULE:even').each(
	function() { 
		var WNomCell_1 = $(this).attr('nom_cellule');
		var WNomCell_2 = $(this).next('CELLULE').attr('nom_cellule');
 
		var WName1 = $(this).find('NAME').text();
		var WLib1 = $(this).find('LIB').text();
		var WElement1 = $(this).find('ELEMENT').text();
		var WType1 = $(this).find('TYPE').text();
		var WCadrage1 = $(this).find('CADRAGE').text();
		var WCadrage_V1 = $(this).find('CADRAGE_V').text();
		var WValInit1 = $(this).find('VAL_INIT').text();
		var WSize1 = $(this).find('SIZE').text();
		var WMax_Car1 = $(this).find('MAX_CAR').text();
		var WVal_Vert1 = $(this).find('VAL_COUL_VERT').text();
		var WVal_Orange1 = $(this).find('VAL_COUL_ORANGE').text();
		var WVal_Rouge1 = $(this).find('VAL_COUL_ROUGE').text();
		var WFichier1 = $(this).find('FICHIER').text();
		var WExtension1 = $(this).find('EXTENSION').text();
		var WSeparateur1 = $(this).find('SEPARATEUR').text();
		var WLig_Fic1 = parseInt($(this).find('LIG_FIC').text());
		var WCol_Fic1 = parseInt($(this).find('COL_FIC').text());
		var WImage1 = $(this).find('IMAGE').text();
		var WH_Img1 = $(this).find('H_IMG').text();
		var WL_Img1 = $(this).find('L_IMG').text();
		var WPosImage1 = $(this).find('POS_IMAGE').text();
		var WClasse1 = $(this).find('CLASSE').text();
 
		WIndexTab = WIndexTab + 1;
		G_TAB_NOM[WIndexTab] = WName1;
		G_TAB_LIB[WIndexTab] = WLib1;
		G_TAB_TYPE[WIndexTab] = WType1;
		G_TAB_CADRAGE[WIndexTab] = WCadrage1;
		G_TAB_VERT[WIndexTab] = WVal_Vert1;
		G_TAB_ORANGE[WIndexTab] = WVal_Orange1;
		G_TAB_ROUGE[WIndexTab] = WVal_Rouge1;
		G_TAB_FICHIER[WIndexTab] = WFichier1;
		G_TAB_IMAGE[WIndexTab] = WImage1;
		G_TAB_POSIMAGE[WIndexTab] = WPosImage1;
		G_TAB_CLASSE[WIndexTab] = WClasse1;
 
		if (WElement1 !== "DATE")
		{
			var WName2 = $(this).next('CELLULE').find('NAME').text();
			var WLib2 = $(this).next('CELLULE').find('LIB').text();
			var WElement2 = $(this).next('CELLULE').find('ELEMENT').text();
			var WType2 = $(this).next('CELLULE').find('TYPE').text();
			var WCadrage2 = $(this).next('CELLULE').find('CADRAGE').text();
			var WCadrage_V2 = $(this).next('CELLULE').find('CADRAGE_V').text();
			var WValInit2 = $(this).next('CELLULE').find('VAL_INIT').text();
			var WSize2 = $(this).next('CELLULE').find('SIZE').text();
			var WMax_Car2 = $(this).next('CELLULE').find('MAX_CAR').text();
			var WVal_Vert2 = $(this).next('CELLULE').find('VAL_COUL_VERT').text();
			var WVal_Orange2 = $(this).next('CELLULE').find('VAL_COUL_ORANGE').text();
			var WVal_Rouge2 = $(this).next('CELLULE').find('VAL_COUL_ROUGE').text();
			var WFichier2 = $(this).next('CELLULE').find('FICHIER').text();
			var WExtension2 = $(this).next('CELLULE').find('EXTENSION').text();
			var WSeparateur2 = $(this).next('CELLULE').find('SEPARATEUR').text();
			var WLig_Fic2 = $(this).next('CELLULE').find('LIG_FIC').text();
			var WCol_Fic2 = $(this).next('CELLULE').find('COL_FIC').text();
			var WImage2 = $(this).next('CELLULE').find('IMAGE').text();
			var WH_Img2 = $(this).next('CELLULE').find('H_IMG').text();
			var WL_Img2 = $(this).next('CELLULE').find('L_IMG').text();
			var WPosImage2 = $(this).next('CELLULE').find('POS_IMAGE').text();
			var WClasse2 = $(this).next('CELLULE').find('CLASSE').text();
		}
...
ici je compose dynamiquement mes lignes HTML
...
		$('#'+WNomTAB).append($(WLigne));

Le programme, entier, créé dynamiquement une page HTML sous la forme d'un tableau de 4 colonnes, n lignes et je lis donc les noeuds 2 par 2 pour afficher chaque ligne en une seule fois (soit 4 colonnes).

Le problème est que lorsque je détecte un élément de type DATE, il faudrait qu'il ne passe pas au noeaud suivant, car on me demande que les dates occupent une ligne entière.
La ligne suivante doit donc commencer au noeud suivant.

Dans mon fichier XML, vous voyez que le 1er noeud est une date, donc il faut que la première ligne contienne uniquement cette date et ce n'est qu'à partir du 2ème noeud que doit commencer la 2ème ligne.

Une petite capture qui aidera surement à me comprendre

Nom : Capa01.png
Affichages : 152
Taille : 10,9 Ko

En fait, je pense qu'il ne faudrait pas faire le .next() en cas de date ou alors faire un .prev(), mais tous les essais que j'ai fait n'ont pas fonctionné et c'est pourquoi j'en appel à vos connaissances

Je précise que s'il n'y a pas de champ DATE, ça fonctionne nickel.

J'espère que je suis assez clair pour me faire comprendre et surtout que vous pourrez m'aider.

Merci d'avance pour votre aide.

**SpaceFrog** · 12/09/2016, 17h16

colle juste un colspan à la cellule ...

**NoSmoking** · 12/09/2016, 19h39

Bonjour,
juste pour dire : curieux quand même ce mélange de javascript vanilla et jQuery !

**Zebulon777** · 13/09/2016, 08h30

Envoyé par SpaceFrog

colle juste un colspan à la cellule ...

Merci, mais, à laquelle ? J'ai fait plusieurs essais sans résultat.

Envoyé par NoSmoking

Bonjour,
juste pour dire : curieux quand même ce mélange de javascript vanilla et jQuery !

(je ne suis pas un puriste,

, et je fais avec les moyens du bord...)
Pourquoi ça ? Qu'est-ce qui te gène ?

Je vous mets le code qui génère la page HTML, ce qui vous aidera peut-être plus facilement à m'aider.

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
 
...
...
...
						WCadrage1 = " align='" + WCadrage1 + "' valign='" + WCadrage_V1 + "'";
						WCadrage2 = " align='" + WCadrage2 + "' valign='" + WCadrage_V2 + "'";
						WCol_Fic1 = WCol_Fic1 - 1;// Obligatoire, le comptage des colonnes commence à 0 et non à 1;
						WCol_Fic2 = WCol_Fic2 - 1;// Obligatoire, le comptage des colonnes commence à 0 et non à 1;
// ELEMENT = DATE
						var WL = "";
						if (WElement1 === "DATE")
						{
							if (WValInit1 === "") // Pour les dates, on ne doit pas avoir de VAL_INIT à vide.
							{
								WValInit1 = 0;
							}
							WL = CreationElementDate(WNomTAB, WName1, WLib1, WCadrage1, WValInit1);
//							$('#'+WNomTAB).append($(WL));
						}
						if (WElement2 === "DATE") // Pour les dates, on ne doit pas avoir de VAL_INIT à vide.
						{
							if (WValInit2 === "")
							{
								WValInit2 = 0;
							}
							WL = CreationElementDate(WNomTAB, WName2, WLib2, WCadrage2, WValInit2);
//							$('#'+WNomTAB).append($(WL));
						}
 
						var WLigne = "<tr valign='middle' >";
 
// Lecture du fichier si besoin
						var WVal1 = "";
						var WVal2 = "";
 
						if (WFichier1 !== "" && typeof(WFichier1) !== "undefined" )
						{
							WVal1 = LectureFichier(WFichier1, WExtension1, WLig_Fic1, WCol_Fic1, WSeparateur1);
						}
						if (WFichier2 !== "" && typeof(WFichier2) !== "undefined" )
						{
							WVal2 = LectureFichier(WFichier2, WExtension2, WLig_Fic2, WCol_Fic2, WSeparateur2);
						}
// ELEMENT = LIB						
						if (WElement1 === "LIB")
						{
							if (WLib1 !== "")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WLib1 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							else
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + "&nbsp;" + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + "&nbsp;" + "</td>";
							}
						}
						if (WElement2 === "LIB")
						{
							if (WLib2 !== "")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WLib2 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							else
							{
								WLigne = WLigne + "<td width='" + WTaille1+"'" + WCadrage2 + ">" + "&nbsp;" + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2+"'" + WCadrage2 + ">" + "&nbsp;" + "</td>";
							}
						}
// ELEMENT = IMAGE
						var WImageACharger = "";
						var WIMG = "";
						if (WElement1 === "IMAGE")
						{
							WImageACharger = G_RepImages + WImage1;
							WIMG = "<IMG src='" + WImageACharger + "' width='" + WL_Img1 + "' height='" + WH_Img1 + "'>";
							if (WPosImage1 === "AVANT")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WLib1 + "&nbsp;" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							if (WPosImage1 === "APRES")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WIMG + "&nbsp;" + WLib1 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							if (WPosImage1 === "DESSUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WLib1 + "<BR/>" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							if (WPosImage1 === "DESSOUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WIMG + "<BR/>" + WLib1 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
						}
						if (WElement2 === "IMAGE")
						{
							WImageACharger = G_RepImages + WImage2;
							WIMG = "<IMG src='" + WImageACharger + "' width='" + WL_Img2 + "' height='" + WH_Img2 + "'>";
							if (WPosImage2 === "AVANT")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WLib2 + "&nbsp;" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							if (WPosImage2 === "APRES")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WIMG + "&nbsp;" + WLib2 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							if (WPosImage2 === "DESSUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WLib2 + "<BR/>" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							if (WPosImage2 === "DESSOUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WIMG + "<BR/>" + WLib2 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
						}
						WLigne = WLigne + "</tr>";
						$('#'+WNomTAB).append($(WLigne));
					});
					WIndex = WIndex + 1;
				});
			} // FIN SUCCES
		}); // FIN AJAX
	});
...
...
...

**NoSmoking** · 13/09/2016, 19h48

Pourquoi ça ? Qu'est-ce qui te gène ?

ce genre de code

Code :

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

1
2
3
4
var WDiv = document.createElement("div");
WDiv.setAttribute("id", WNomDIV);
WDivTAB_00.appendChild(WDiv);
var WDivID = document.getElementById(WNomDIV);

en fait WDiv c'est la même chose que WDivIDou encore

Code :

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

1
2
3
4
var WName2 = $(this).next('CELLULE').find('NAME').text();
var WLib2 = $(this).next('CELLULE').find('LIB').text();
var WElement2 = $(this).next('CELLULE').find('ELEMENT').text();
// etc...

avec une répétition de $(this).next('CELLULE'), donc autant prendre le temps de « comprendre/maitriser » le javascript et apprendre/comprendre et utiliser jQuery mais n'utiliser que des bouts qui te facilite la vie ne t'aidera pas à progresser.

**Zebulon777** · 14/09/2016, 09h38

Oui, mais je dois faire les 2 la fois, car on ne me laisse pas trop le temps.

Je ne vois pas comment éviter la répétition de $(this).next('CELLULE') puisqu'il faut que je ramène plusieurs valeurs différentes du XML ?

ET je n'arrive toujours pas à comprendre pourquoi ce code me ramène une case "blanche" ?

**NoSmoking** · 14/09/2016, 19h11

Oui, mais je dois faire les 2 la fois, car on ne me laisse pas trop le temps.

Prendre le temps maintenant c'est gagner du temps plus tard

Je ne vois pas comment éviter la répétition de $(this).next('CELLULE')...

simplement en factorisant, tu gagnes en lisibilité et en performance.

Code :

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

1
2
3
4
5
6
var $_nextCellule = $(this).next('CELLULE'); // mise en cache évite le rappel des méthodes
 
var WName2    = $_nextCellule.find('NAME').text();
var WLib2     = $_nextCellule.find('LIB').text();
var WElement2 = $_nextCellule.find('ELEMENT').text();
// etc...

ET je n'arrive toujours pas à comprendre pourquoi ce code me ramène une case "blanche" ?

parce que tu lui demande pardi !

Ton soucis vient de la lecture par deux de tes données et donc de la fermeture des <tr>.
Lorsque tu rencontres une donnée « DATE » tu fermes la ligne et tu traites ta deuxième données qui se retrouve donc également dans une ligne fermée.

Il te faut lire tes données une par une.

Cela pourrait donner en gros :

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
// pour gestion nouvelle ligne
NbrColonneTraitee = 0
 
POUR TOUTES les données FAIRE
 
    RecuperationDONNEE ()
 
    SI NbrColonneTraitee EGAL 0 ALORS
        Ouverture <TR>
    Fin SI
 
    SI donnée DATE ALORS
        // formate le HTML avec les données
        FormatageLigneDATE ()
        // force fermeture <TR>
        NbrColonneTraitee = 2
    SINON
        // formate le HTML avec les données
        FormatageLigneDONNEE ()
        // comptabilise la colonne
        NbrColonneTraitee += 1
    Fin SI
 
    SI NbrColonneTraitee EGAL 2 ALORS
        Fermeture </TR>
        AjoutLigneCrée ()
        // pour ouverture prochaine ligne
        NbrColonneTraitee = 0
    Fin SI
Fin FAIRE

**Zebulon777** · 16/09/2016, 08h32

Ha du constructif, merci !

Je ne comprends pas ton histoire de factorisation du code, c'est le "$_" ?

Très clair ton morceau de code, je vais m'en inspirer.

**NoSmoking** · 18/09/2016, 10h20

Je ne comprends pas ton histoire de factorisation du code, c'est le "$_" ?

rien d'autre que le nom d'une variable j'aurais tout aussi pu écrire

Code :

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

var nextCellule = $(this).next('CELLULE'); // mise en cache évite le rappel des méthodes

Imaginons que l'on te demande de prendre un livre, aller à la page 56 et lire toutes les lignes de cette page, en vertu de ton code tu ferais

prendre le livre
ouvrir à la page 56
lire ligne #1
prendre le livre
ouvrir à la page 56
lire ligne #2
prendre le livre
ouvrir à la page 56
lire ligne #3
etc...

ce qui est ballot puisque instinctivement une fois le livre ouvert à la page 56 tu liras la ligne #1, ligne #2 ...etc ... mais comme il te faut refermer le livre à chaque lecture, une « solution » serait de mettre un marque page sur la page 56, ainsi tu auras accès plus rapidement à la page sans refaire de recherches, c'est le rôle de la variable $_nextCellule.

**Zebulon777** · 19/09/2016, 08h34

Super, j'ai tout compris, merci.

Positionnement en AJAX / JQuery

jQuery

Discussions similaires

Partager

Partager