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.

Positionnement en AJAX / JQuery

jQuery

Mode arborescent

Discussions similaires

Partager

Partager