Discussion :

[_FaFa_]

Bonjour

Je tente de créer une arborescence d'un système UNIX ou Windows en javascript avec l'aide de la libraire YUI. Les différents chemins et fichiers sont contenus dans une base de données. Pour cela je fait recours à AJAX. L'arborescence est opérationnel pour les répertoires, seulement j'essaye d'ajouter les fichiers qui correspondent à ces répertoires. Mon code est le suivant :

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
	function extractUrlParams () 
	{
		// On récupère les paramètres passer par la méthode GET
		// Tous les paramètres seront stockés et retournés via le tableau tabRetour
		var tab = location.search.substring(1).split('&');
		var tabRetour = [];
		for (var i=0; i<tab.length; i++) 
		{
			var x = tab[ i ].split('=');
			tabRetour[i]=x[1];
		}
		return tabRetour;
	}
 
	function createRequestObject()
	{
    	var http;
   		if (window.XMLHttpRequest)
    	{ // Mozilla, Konqueror/Safari, IE7 ...
        	http = new XMLHttpRequest();
    	}
    	else if (window.ActiveXObject)
   		{ // Internet Explorer 6
        	http = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	return http;
	} // createRequestObject()
 
	function returnFiles(node)
	{
		// On extrait le nom du client de l'url
		var clientName = extractUrlParams ();
		// On créer l'objet XMLHTTPRequest
		var http = createRequestObject();
		// On ouvre la connexion avec le serveur
  		http.open('GET', './file.php?clientName=' + clientName[1] + '&path=/' + node.data + '/', true);
 		http.onreadystatechange = (function ()
    	{
     		if (http.readyState == 4 && http.status == 200)
	    	{
	    		// On récupère le données de la requête dans le tableau files
	        	var files = validateJSON(http.responseText);
          		if (files !== false)
          		{
            		for (var i in files)
            		{
            			// On ajoute un noeud style HTML
              			var tempHTML = new YAHOO.widget.HTMLNode(files[i].name, node, false, true);
              			// On chande l'icône de ce noeud
						tempHTML.contentStyle = "icon-doc";	
            		}
           		}
           	}
    	});	
  	http.send(null);
	} // returnFiles()

J'ai inclus la fonction qui extrait les paramètres de l'url ainsi que celle qui créer l'objet XMLHttpRequest.

Lorsque je clique sur un noeud ( un répertoire ), il ouvre ce dernier mais n'affiche rien. A ce moment je referme ce répertoire puis dès que je l'ouvre à nouveau il affiche correctement les fichiers. En ce qui concerne mes répertoires j'ai utilisé une requête asynchrone, et il affiche tout du premier coup. Je crois que la requête est trop longue et qu'il passe alors à la suite du code vu qu'il n'a pas fini de tout charger. Je voudrais savoir comment faire pour qu'il affiche tout du premier coup. J'ai essayé la requête synchrone, seulement il n'affiche rien ...

Je vous remercie de votre attention,

FaFa

[_FaFa_]

Bon j'ai trouvé la réponse. Il fallait se pencher un peu plus sur la requête synchrone.

Le code suivant marche :

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
function returnFiles(node, nodeLabel)
	{
		// On extrait le nom du client de l'url
		var clientName = extractUrlParams ();
		// On créer l'objet XMLHTTPRequest
		var http = createRequestObject();
		// On ouvre la connexion avec le serveur
  		http.open('GET', './file.php?clientName=' + clientName[1] + '&path=' + nodeLabel, false);
  		http.send(null);
 		// On récupère le données de la requête dans le tableau files
	        var files = validateJSON(http.responseText);
	        if (files !== false)
                {
        	        for (var i in files)
                        {
            	              // On ajoute un noeud style HTML
            	              var tempHTML = new YAHOO.widget.TextNode(files[i].name, node, false);
            	              // On chande l'icône de ce noeud
			      tempHTML.labelStyle = "icon-doc";	
                        }
                 }
	} // returnFiles()