Discussion :

[hubchau]

Bonjour à tous,

je suis stagiaire dans une boite et on m'a demandé de bosser sur une page web permettant de sélectionner des noeuds de la hiérarchie du service stockée dans une BDD MySQL pour pouvoir envoyer un message aux sélectionnés (cf capture 1).


Je me suis tourné vers Dynatree qui permet de créer des arbres modifiables à souhait.
Pour "peupler" ces arbres, on peut déclarer une variable JS qui reçoit une chaîne formatée JSON :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var treeData = [
		{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
		{title: "Folder", isFolder: true, key: "id3",
			children: [
				{title: "Sub-item 3.1",
					children: [
						{title: "Sub-item 3.1.1", key: "id3.1.1" },
						{title: "Sub-item 3.1.2", key: "id3.1.2" }
					]
				}
			]
		}];

Sauf que moi, ma structure est stockée dans une base MySQL. J'ai donc codé une page php qui se connecte à la bdd et fait les différentes opérations pour récupérer une chaîne contenant exactement le même format de chaîne que ci-dessus.

Jusque là, pas de pb.

Là ou je galère, c'est sur la façon de passer cette chaîne de caractères à ma variable JS "treeData".
Dans la doc de Dynatree, il est dit que l'on peut récupérer le contenu d'un flux/fichier JSON envoyé par un service web, mais je n'ai aucune idée de comment cela peut fonctionner.

J'ai essayé de combiner php, html et JS :

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
			include("MySQLtoJSON.php"); // ce fichier php contient la fonction getJSON() qui retourne une chaîne de caractères formatée à la sauce JSON
			$arbre = getJSON(); // Je récupère le contenu de cette chaîne dans $arbre
			echo ("var treeData = ". $arbre);
 
[...]
</script>

pour que mon fichier html ressemble à ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">	
			var treeData = [
		{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
		{title: "Folder", isFolder: true, key: "id3",
			children: [
				{title: "Sub-item 3.1",
					children: [
						{title: "Sub-item 3.1.1", key: "id3.1.1" },
						{title: "Sub-item 3.1.2", key: "id3.1.2" }
					]
				}
			]
		}];
</script>

Lorsque je regarde le code source, tout s'affiche comme il faut (du moins il me semble) mais le dynatree ne s'affiche plus.

Je suis bien conscient que mon code/raisonnement est un peu tiré par les cheveux mais je vois pas trop comment mieux m'y prendre d'une autre façon.

Merci pour tout coup de main.

Hubert