Discussion :

[Zebulon777]

Bonjour tout le monde,

Je me lance dans un grand projet et j'espère que vous pourrez m'aider.
Je vais essayer de l'expliquer simplement.
(En fait, pour ceux qui connaissent, on me demande de créer un moteur d'inférence en Javascript.)

Dans un fichier XML, je vais récupérer la structure d'une page qui me permet donc de récupérer le nombre de zones de saisie, leur type et leur emplacement dans un tableau, la valeur d'initialisation, le nombre de caractère, etc...

Le tableau est préalablement créé dans la page HTML et chaque cellule est nommée L1C1, L1C2... L3C1, L3C2, etc...

Lorsque les informations sont récupérer dans le fichier XML, il faut ensuite que je créé dynamiquement toutes les zones de saisies dans les bonnes cellules du tableau de la page HTML.

J'arrive bien à récupérer les informations du fichier XML, mais je n'arrive pas à créé dynamiquement les zones de saisie.

Je suis donc preneur de toutes aide et de tous conseils qui me permettraient de me dépatouiller.

Merci d'avance pour toute l'aide que vous m'apporterez...

[NoSmoking]

Bonjour,

il faut ensuite que je créé dynamiquement toutes les zones de saisies...

il existe pour cela la méthode createElement de l'objet document

Code :

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

var oInput = document.createElement('INPUT');

...dans les bonnes cellules du tableau de la page HTML.

il existe pour cela la méthode appendChild qui permet l'ajout d'un élément à un autre élément du DOM.

Concernant la récupération des cellules d'une TABLE il suffit de pointer sur la bonne ligne puis colonne et pour cela tu peux utiliser les collections rows et cells d'une TABLE.

Avec le HTML suivant

Code html :

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

1
2
3
4
5
6
<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
  </tr>
</table>

le script suivant

Code :

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

1
2
3
var oTable = document.getElementsByTagName('TABLE')[0];
var oCell = oTable.rows[0].cells[1];  // ligne 1, cellule 2
alert(oCell.innerHTML);

affichera "Colonne 2".

[Zebulon777]

Merci, dés que je peux tester ça, je fais un retour.

(Ps : j'ai supprimé mon petit HS, j'ai trouvé la réponse)

[Zebulon777]

Bon, ca avance, mais ce n'est pas encore une grande réussite

Lorsque j'ai créé l'élément, je n'arrive pas à le placer dans la bonne cellule du tableau ?
D'ailleurs, je ne vois pas l'élément créé sur la feuille...
C'est normal, docteur ?

Code :

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

1
2
3
4
 
var oInput = document.createElement('INPUT');
var ObjTab = document.getElementById("Tab");
ObjTab.rows[0].cells[1] = oInput;

[NoSmoking]

tu as oublié l'essentiel

il existe pour cela la méthode appendChild qui permet l'ajout d'un élément à un autre élément du DOM.

donc

Code :

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

1
2
3
4
5
var oInput = document.createElement('INPUT');
var ObjTab = document.getElementById("Tab");
// ObjTab.rows[0].cells[1] = oInput; -- NE VEUX RIEN DIRE --
// utilisation de la méthode appendChild
ObjTab.rows[0].cells[1].appendChild( oInput);

[Bovino]

je n'arrive pas à le placer dans la bonne cellule du tableau ?

Attention, dans la notation

Code :

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

ObjTab.rows[0].cells[1]

la propriété cells correspond à une collection d'objets td ou th, en aucun cas à un input.

[Zebulon777]

Super, merci beaucoup.

Maintenant, comment faire pour configurer les champs créés dynamiquement ? (Libellé devant, Type, nb car, format, etc...) ?

[devyan]

Bonjour,

Avec ta variable oInput tu peux configurer tout ce qui correspond au input "pur" (les attributs HTML).

En ce qui concerne un "Libellé devant" il faut le créer comme tu fais pour le input (mais ce sera un tag label)

[Zebulon777]

Dites, petite question subsidiaire : comment récupérer le nom d'un noeud d'un fichier XML ?

Un truc du style : ObjetXML.selectNodes(WNoeud0).item(WIndex).name; ?

[SpaceFrog]

En cherchant un peu sur le forum

http://www.developpez.net/forums/d65...leau-editable/
http://javascript.developpez.com/act...urdine-Falola/

[Zebulon777]

Merci, mais ce n'est pas ça, je me suis mal fais comprendre ou alors je n'ai pas compris.
Je pars d'un fichier XML, et je voudrai tester les noeuds récupérés.

Voici le type de fichier XML que j'utilise :

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
<TERRAINS>
	<AAAA>
		<CODE>AAAA</CODE>
		<NOM>Nom de AAAA</NOM>
		<SECTION>
			<NOM_SECTION>Nom de la section</NOM_SECTION>
			<ZONE_SAISIE>
				<LIB>Départs - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L1C1</CELLULE>
				<LIG>1</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
...
...
...

Et voici le code :

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
function CreationPage(P_Terrain) {
	var ObjetXML = new ActiveXObject("Microsoft.xmldom");
	ObjetXML.async = false;
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	WFichierXml = ObjetXML.load(WFichier);
	WNoeud0 = "TERRAINS/" + G_TERRAIN;
	WNoeud1 =  WNoeud0 + "/*";
	var WTotal = ObjetXML.selectNodes(WNoeud1).length; // CODE et NOM_TERRAIN ne doivent pas être dans la boucle.
	WCode = ObjetXML.selectNodes(WNoeud0 + "/CODE").item(0).text;
	WNomTerrain = ObjetXML.selectNodes(WNoeud0 + "/NOM").item(0).text;
	WNoeud2 =  WNoeud0 + "/SECTION/*";
	var WNb_Section = ObjetXML.selectNodes(WNoeud2).length;
	var WIndex = 0;
	while (WIndex <= WNb_Section)
	{
		WNoeud = ObjetXML.selectNodes(WNoeud0).parentNode.nodeName; //???????
		if (WNoeud == "SECTION")
		{
		}
		else
		{
			if (WNoeud == "ZONE_SAISIE")
			{
			}
			else
			{
			};
		};
		WIndex = WIndex + 1;
	};
// Application de la classe pour le nom de l'aérodrome.	
	var ObjCell = document.getElementById("Cell_Titre");
	ObjCell.className = "SousTitre";
	Cell_Titre.innerHTML = WNomTerrain;

Il faut que j'affiche la section, et qu'ensuite les INPUTs soient créés dans les bonnes cases.

[SpaceFrog]

Personnellement je passerais par Jquery et la puissance de ses selecteurs pour parser ton XML

[Zebulon777]

Oula, j'y connais absolument rien, je débute sur ce genre de trucs...
Je ne connais absolument pas le JQuery.

[SpaceFrog]

Je pense que l'investissement minime de départ dans la compréhension de JQuery te permettra de développer plus sereinement par la suite.

[Zebulon777]

Je suis entrain de regarder, mais je n'y comprends pas grand chose et le temps me manque.
Un peu d'aide serait vraiment la bienvenue.

[SpaceFrog]

commence par intégrer jquery à ta page
http://javascript.developpez.com/faq/jquery/
http://javascript.developpez.com/cou...meworks#jquery

reviens ensuite poser des questions précises selon ton avancement, on pourra t'aider pas à pas ...

[Zebulon777]

Bon, j'avance... lentement, mais j'avance

Le fichier XML s'ouvre bien, mais impossible de récupérer les valeurs.

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
<?xml version="1.0" encoding="utf-8"?>
<TERRAINS code_terrain="AAAA" nom_terrain="Nom AAAA">
	<SECTIONS>
		<SECTION nom_section="Section 1">
			<ZONE_SAISIE>
				<LIB>Départs - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L1C1</CELLULE>
				<LIG>1</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Départs - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L2C1</CELLULE>
				<LIG>2</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Arrivées - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L3C1</CELLULE>
				<LIG>3</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Arrivées - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L4C1</CELLULE>
				<LIG>4</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
		</SECTION>
		<SECTION nom_section="Section 2">
			<ZONE_SAISIE>
				<LIB>LOC. - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L6C1</CELLULE>
				<LIG>6</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>LOC. - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L7C1</CELLULE>
				<LIG>7</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - Départs - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L8C1</CELLULE>
				<LIG>8</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - Départs - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L9C1</CELLULE>
				<LIG>9</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - T and GO - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L10C1</CELLULE>
				<LIG>10</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - T and GO - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L11C1</CELLULE>
				<LIG>11</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
		</SECTION>
	</SECTIONS>
</TERRAINS>

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
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
						 {
							 var WCode_Terrain = $(this).attr('code_terrain');
							 var WNom_Terrain = $(this).attr('nom_terrain');
							 var WNom_Section = $(this).attr('nom_section');
						 }
			}
			);
		}
	);
}

[SpaceFrog]

Code :

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

var WCode_Terrain = $(this).find('code_terrain').text();

[Zebulon777]

Aie, ça fonctionne pas :

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
 
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
						 {
							var WCode_Terrain = $(this).find('code_terrain').text();
							var WNom_Terrain = $(this).find('nom_terrain').text();
							var WNom_Section = $(this).find('nom_section');
 
alert(WCode_Terrain + G_CrLf + WNom_Terrain + G_CrLf + WNom_Section);							 
						 }
				}
			);
		}
	);
}

[SpaceFrog]

Teste avec ceci

Code :

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

1
2
3
4
success: function(xml) 
						 {
							console.log( $(xml).find('TERRAINS[code_terrain="AAAA"]').text();
}