[débutant jQuery] TreeView

**SPACHFR** · 26/11/2009, 11h53

Bonjour,

J'utilise pour la première fois jQuery. Pour les besoins de mon application, je dois afficher un arbre dont la taille est relativement importante. Après de nombreux tests j'ai choisie le Plugin Treeview de jQuery pour la rapidité d'affichage.

Cependant j'ai un problème (avec I.E uniquement) que je n'arrive pas à résoudre.

Mon arbre est généré via un CGI (écrit en C).
Ce CGI est appelé via une requête AJAX (non jQuery).
Le CGI génére le code complet d'une page html dont le résultat est affiché dans une FRAME. (je sais c'est pas top mais je ne connaissais rien au Dev Web et depuis je regrette un peu..).
Pour écrire le résultat de mon CGI dans la FRAME, je fais :
document.open()
document.write()
document.close()

Dans ma page html créé, j'ai une fonction jQuery devant construire l'arbre.

Lorsque je réalise mon test avec FireFox aucun problème tout fonctionne.
Avec IE, j'ai systématiquement l'erreur : Objet attendu
La position de l'Objet attendu dans le méssage erreur est toujours le $ de la fonction jQuery

J'ai fais un test. J'ai copier/coller le code html généré via le CGI dans une page html que j'ai mis sur le serveur et là, plus de problème IE affiche l'arbre correctement.

Bref je ne vois pas quoi faire, le code html étant bon, j'ai visiblement un probleme avec la fonction jQuery mais je ne trouve pas

Pourriez vous m'aider ?

Merci

Exemple de la page générée (arbre et normalement beaucoup plus important)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="./css/jquery.treeview.css" />
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>
<script  type="text/javascript">
 $(document).ready(function() {
$("#browser").treeview();
});
 
}
</script></head><body><div id="main">
<ul id="browser" class="filetree">
	<li><span class="folder">reference</span>
	<ul>
		<li class="closed"><img src="../images/CPC1.gif"/><a onclick="ViewCPC('XF2A1   ');">XF2A1   </a></span>
			<ul>
			<li><img src="../images/blue_term.png" /><a onclick="ViewLPAR('XF2A1   -CMVS    ');">CMVS    </a></li>
			<li><img src="../images/blue_term.png" /><a onclick="ViewLPAR('XF2A1   -FMVS    ');">FMVS    </a></li>
			</ul>
		</li>
		<li class="closed"><img src="../images/CPC1.gif"/><a onclick="ViewCPC('XF291   ');">XF291   </a></span>
			<ul>
			<li><img src="../images/blue_term.png" /><a onclick="ViewLPAR('XF291   -NMVS    ');">NMVS    </a></li>
			<li><img src="../images/blue_term.png" /><a onclick="ViewLPAR('XF291   -PROD    ');">PROD    </a></li>
			</ul>
		</li>
	</ul>
	</li>
</ul>
</div>
</body>
</html>

Code de l'appel AJAX (code de test)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type="text/javascript">
function aff() {
  prjname='';
  var target_url="/cgi-bin/CPTREE";
var request_methode="POST";
var xhr_object = prjname;                                        
  if(window.XMLHttpRequest) 
     xhr_object = new XMLHttpRequest();
  else if(window.ActiveXObject) 
     xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else { 
     alert("Your browser does not support XMLHttpRequest.");
     return;
  }
  xhr_object.open(request_methode, target_url, true); 
  xhr_object.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr_object.send(prjname);
  xhr_object.onreadystatechange = function() { 
     if(xhr_object.readyState == 4 && xhr_object.status == 200){
       var obj_return=xhr_object.responseText;
       document.open();
       document.write(obj_return);
       document.close();
      }
  }
    return xhr_object;
}
</script>
</head>
<body>
<input type="button" value="Start" onclick="aff()">
</body>
</html>

**SPACHFR** · 26/11/2009, 14h38

J'ai enfin trouvé une solution.
Je ne sais pas ce quelle vaut d'un point de vue code mais cela fonctionne sous FF et I.E

En fait j'ai modifié ma fonction jQuery

Code :

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

1
2
3
4
 
$(document).ready(function() {
$("#browser").treeview();
});

Par

Code :

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

1
2
3
4
5
6
7
 
function makeTreeview() {
  $("#browser").treeview({
    toggle: function() {}
  });
}
setTimeout('makeTreeview();', 80);"

Ceci étant mon premier code en jQuery, n'hésitez pas à me le signaler si vous voyez une grosse boulette...

MERCI

**SPACHFR** · 26/11/2009, 14h57

J'ai crié victoire trop vite, cela fonctionne 4 fois sur 5 sous I.E

Je craque.......

[débutant jQuery] TreeView

jQuery

Discussions similaires

Partager

Partager