Discussion :

[Askirkela]

Bonjour à tous.
Je souhaiterais commencer par m'excuser, vu la fréquence des posts à propos de la lecture d'XML en JS.

Malgré toutes mes recherches sur le sujet, je n'ai rien trouvé de satisfaisant (soit trop simple pour mon cas, soit trop avancé).
J'expose donc mon problème : je dispose d'un fichier "donnees.xml" de ce type

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<root>
  <branche1>
    <ss-branche1>
      <tag1>toto</tag1>
      <tag2>tata</tag2>
    </ss-branche1>
    ...(même forme que ss-branche1)
  </branche1>
  <branche2>
  ...(même forme que branche1)
  </branche2>
</root>

Mon objectif est de récupérer les données contenues dans tous les tag1 et tag2 pour les insérer en tant qu'option d'un select

Pour l'instant, j'en suis à ce point qui ne fonctionne pas du tout :

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
 
var docXml;
function loadXML(){
	// Routine de vérification si le navigateur gêre la méthode utilisée
	if (document.implementation && document.implementation.createDocument) {
	    // déclaration pour Mozilla et FF
	    docXml = document.implementation.createDocument('', '', null);
	}
	else if (window.ActiveXObject){
	    // déclaration pour IE
	    docXml = new ActiveXObject("Microsoft.XMLDOM");
	}
	else{ alert('Votre navigateur ne saurait pas éxécuter ce script.'); }
	docXml.load("avantages.xml");
}
window.onload = function(){ loadXML(); createSelectAv();}
 
function createSelectAv(){
	var noeud = docXml.getElementsByTagName('avantage');
	for(var i=0;i < noeud.length; i++){
		var nom = noeud[i].getElementsByTagName('nom').firstChild.value;
		var cout = noeud[i].getElementsByTagName('cout').firstChild.value;
                document.getElementById('selectAv').add(nom+' (Cout : '+cout+')', null);
        }
	document.getElementById('avantages').appendChild(select);
				//générer un select contenant les nom des avantages et affichant le coût une fois selectionné
				//type <select><option>nom (Cout : X)</option></select>
}

Auriez-vous une idée pour me dépanner (quitte à modifier tout ça pour avoir le comportement voulu, autant que ça fonctionne )?

[SpaceFrog]

perso je regarderais du coté de jquery et des son ajax et dataType xml ...

[Askirkela]

Ok, du coup, j'ai regardé du côté de ce tuto...

Il me reste une zone d'ombre concernant cette ligne

Code :

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

$('<div class="items" id="link_' + id + '"></div>').html('<a href="' + url + '">' + title + '</a>').appendTo('#Div_XML');

Je vois pas bien ce qu'elle fait et du coup j'arrive pas à adapter à mon problème.

Et donc après, comme je suis complètement étranger à JQuery, 'me restera à trouver comment bidouiller mon select et permettre de rajouter la même liste à la suite...
J'vais m'en sortir... si, si

[SpaceFrog]

si tu regardes la structure du xml du tuto ..
tu devrais comprendre la manipulation qu'il fait des balises ...

là il ne fait que de l'affichage ...

[Askirkela]

Bon... j'en suis là :

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
$(document).ready(  
    function(){
	$.ajax( {
	    type: "POST",
	    url: "avantages.xml",
	    dataType: "xml",
	    success: function(xml){
		   $(xml).find('avantage').each(   
			 function(){
				var nom = $(this).find('nom').text();
				var cout = $(this).find('cout').text();
				/*$('#selectAv').append(new Option(nom+' (Cout : '+cout+')', null));*/
				$('<option> '+nom+' cout :'+cout+'</option>').appendTo('#selectAv');
		    });
	    }
    });
});

Et ça m'affiche strictement rien (le code en commentaire est une autre approche que j'ai tentée)...

J'ai mon select dans mon arbre html et je veux juste le remplir... pourquoi c'est pas simple?

[SpaceFrog]

on peut voir l'intégralité ?
tu as joint la librairie jquery ?

[Askirkela]

Pour l'intégralité, voilà :

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
 
<!DOCTYPE html> 
<html> 
<head>
<title>Avantages</title>
<meta charset="UTF-8">
<meta lang="fr"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(  
function()
{
$.ajax( {
type: "POST",
url: "avantages.xml",
dataType: "xml",
success: function(xml) 
{
$(xml).find('avantage').each(   
function()
{
var nom = $(this).find('nom').text();
var cout = $(this).find('cout').text();
/*$('#selectAv').append(new Option(nom+' (Cout : '+cout+')', null));*/
$('<option> '+nom+' cout :'+cout+'</option>').appendTo('#selectAv');
});
}
});
}
);
</script>
</head>
<body>
<?php include 'header.php';     ?>
<div id="body">
<br />
<br />
<form id="myform" class="cssform" name="momo" action="Page3.php" method="post">
<p>
<label>Avantages :</label>
<br />
<div id="avantages">
<select id="selectAv"></select>
<input type="button" value="Ajouter un avantage" onclick="ajoutAv();"/>
<br/>
<input type="button" id="supav" value="Supprimer le dernier avantage" style="display:none" onclick="supAv();" />
</div>
</p>
<div style="margin-left: 150px;">
<input type="submit" value="Suite" />
<br/>
</div>
</form>
<?php include 'footer.php';     ?>
</div>
</body>
</html>

J'ai donc joint JQuery via Google (apparemment plus performant niveau chargement).
Pour information, les fonctions ajoutAv() et supAv() sont à refaire vu que c'est complétement différent de ce que j'avais pensé à la base, mais je me pencherais dessus plus tard...

[SpaceFrog]

Tu as un message d'erreur ?
Quels sont les symptômes ?

Si tu utilises firefox, regarde dans le console le retour d'ajax ...

[Askirkela]

Bon, j'ai corrigé 2 ou 3 trucs dans mon xml et ça marche vachement mieux
Maintenant, nouvelle question vu que j'ai aucune idée de comment faire en jquery : Imaginons que je dispose d'un bouton qui soit destiné à lancer une fonction. Comment faire en sorte que cette fonction me génère un nouveau select identique à celui pour lequel j'ai galéré et qui soit situé juste après ledit select?

[andry.aime]

Bonjour

Fait une recherche sur méthode cloneNode.

A+.

[SpaceFrog]

en jquery c'est clone()