[AJAX] menu javascript et ajax

**gregius** · 19/06/2006, 14h15

bonjour,

Je cherche � cr�er un site dynamique avec un menu gauche vertical d�veloppable et qui quand on clic sur un lien, ne change que la partie centrale du site.
J'ai r�ussi � faire les diff�rentes div du site et on m'a donn� un menu javascript � int�grer... le probl�me c'est qu'il ne retient pas dans quel sous-menu il �tait ouvert...
J'ai trouv� un autre javascript (xmlhttprequest) qui permet de ne pas recharger toute la page...
Mais je n'arrive pas � fusionner ces deux javascript pour n'en faire qu'un...

voici le code du premier :

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
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
130
131
 
if(!window.Node){
	var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
	return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
	var result = new Array();
	var children = node.childNodes;
	for(var i = 0; i < children.length; i++){
		if(checkNode(children[i], filter)) result[result.length] = children[i];
	}
	return result;
}
function getChildrenByElement(node){
	return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
	var child;
	var children = node.childNodes;
	for(var i = 0; i < children.length; i++){
		child = children[i];
		if(checkNode(child, filter)) return child;
	}
	return null;
}
function getFirstChildByText(node){
	return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
	for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
		if(checkNode(sibling, filter)) return sibling;
	}
	return null;
}
function getNextSiblingByElement(node){
	return getNextSibling(node, "ELEMENT_NODE");
}
 
var activeMenu = null;
 
function showMenu(){
	if(activeMenu){
		activeMenu.className = "";
		getNextSiblingByElement(activeMenu).style.display = "none";
	}
	if(this == activeMenu){
		activeMenu = null;
	}else{
		this.className = "active";
		getNextSiblingByElement(this).style.display = "block";
		activeMenu = this;
	}
	return false;
}
function initMenu(){
	var menus, menu, text, a, i;
	menus = getChildrenByElement(document.getElementById("menu"));
	for(i = 0; i < menus.length; i++){
		menu = menus[i];
		text = getFirstChildByText(menu);
		a = document.createElement("a");
		menu.replaceChild(a, text);
		a.appendChild(text);
		a.href = "#";
		a.onclick = showMenu;
		a.onfocus = function(){this.blur()};
	}
}
if(document.createElement) window.onload = initMenu;
function MenuDisplay()
{
	document.write('<ul id="menu">');
		document.write('<li class="puce_noeud">Présentation');
		  document.write('<ol>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/presentation/edito.html">Mot du2 ministre</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/presentation/edito.html">Mot du ministre</a></li>');
		  document.write('</ol>');
		  document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud">Chaire');
		  document.write('<ol>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/construction.html">Recherche doctorale</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/construction.html">Manifestations</a></li>');
		 	document.write('</ol>');
		 	document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud">Formation');
		  document.write('<ol>');
		    document.write('<li class="puce_sous_cat"><a href="#" onclick="envoieRequete('bande.html','centre');" >test</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/formation/conseillers.html">Les conseillers en AT</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/formation/programme.html">Programme</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/formation/calendrier.html">Calendrier</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/formation/documents.html">Documents</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/formation/contacts.html">Contacts</a></li>');
		  document.write('</ol>');
		  document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud">Recherches');
		  document.write('<ol>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/construction.html">Finalisées</a></li>');
		    document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/construction.html">En cours</a></li>');
		  document.write('</ol>');
		  document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud">Publications');
			document.write('<ol>');
				document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/publications/tout.html">Vue d\'ensemble</a></li>');
				document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/publications/lettre.html">Lettre</a></li>');
				document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/publications/plaquettes.html">Plaquettes</a></li>');
				document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/publications/etudes&documents.html">Etudes et Documents</a></li>');
				document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/publications/hors-serie.html">Hors Série</a></li>');
				document.write('<li class="puce_sous_cat"><a href="http://cpdt.wallonie.be/publications/depliants.html">Dépliants</a></li>');
			document.write('</ol>');
			document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud"><a href="#">Expertise</a>');
			document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud"><a href="#">Observatoire</a>');
			document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud"><a href="http://cpdt.wallonie.be/contacts/contact.html">Contact</a>');
			document.write('<div class="separateur"></div>');
		document.write('</li>');
		document.write('<li class="puce_noeud"><a href="#">Intranet</a>');
			document.write('<div class="separateur"></div>');
		document.write('</li>');
	document.write('</ul>');
}

Et voici le code du second (nettement plus court) :

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 envoieRequete(url,id)
    {
      var xhr_object = null;
       var position = id;
        if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
        else
       if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
      // On ouvre la requete vers la page désirée
      xhr_object.open("GET", url, true);
       xhr_object.onreadystatechange = function(){
      if ( xhr_object.readyState == 4 )
       {
           // j'affiche dans la DIV spécifiées le contenu retourné par le fichier
           document.getElementById(position).innerHTML = xhr_object.responseText;
       }
       }
       // dans le cas du get
       xhr_object.send(null);
 
   }

Quand j'ajoute l'un dans, l'autre, le menu ne fonctionne plus...

Quelqu'un aurait une id�e de fusion?

Celui qui me trouve �a... je lui paye un bac de chopes :-) ou une caisse de vin comme vous voulez.
Et je suis s�rieux !!!

A+

Greg

**gregius** · 19/06/2006, 22h54

UP

Vraiment personne n'a d'id�e pour m'aiguiller?

**cyrill.gremaud** · 19/06/2006, 23h10

salut ! c'est quand meme dur dur pour quelqu'un qui ne connais pas ton code de s'attaquer � un probl�me comme celui-la...

**gregius** · 19/06/2006, 23h20

Envoy� par cyrill

salut ! c'est quand meme dur dur pour quelqu'un qui ne connais pas ton code de s'attaquer � un probl�me comme celui-la...

Ben voui, je me doute... le probl�me, c'est que c'est pas mon code... c'est celui d'une boite de graphistes qui ne s'y connait pas trop...
Ils m'ont donn� ce menu en javascript et je suis oblig� de le reprendre...
Il doit avoir en tout cas le m�me look... c'est-�-dire d'ouvrir ou de fermer des sous-menus...

Mais s�rieusement, je veux bien n�gicier avec quelqu'un une r�mun�ration � ce boulot... parce que je suis vraiment dans la m... l�
Contactez-moi

Greg

**Mobius** · 20/06/2006, 09h59

Apr�s avoir un peu regard� ta page, je ne te conseil pas de charger dinamiquement le contenu de tes pages (a moins que tu puisse refaire entierement l'architecture des pages et donc du site).
Le plus simple en conservant l'existant, est de mettre a jour ton menu sur chaque page pour qu'il soit d�pli� correctment.

**gregius** · 20/06/2006, 10h34

Envoy� par Mobius

Apr�s avoir un peu regard� ta page, je ne te conseil pas de charger dinamiquement le contenu de tes pages (a moins que tu puisse refaire entierement l'architecture des pages et donc du site).
Le plus simple en conservant l'existant, est de mettre a jour ton menu sur chaque page pour qu'il soit d�pli� correctment.

Mais je comptais refaire toute l'architecture...
En plus, le chargement partiel me permet d'avoir une banni�re flash qui ne se r�initialise pas � chaque changement de page (c'est un slideshow d'images)
Et je n'ai trouv� aucun menu dynamique qui int�graient la technologie ajax dans mes recherches sur le web...
C'est chaque fois des menus statiques...

[AJAX] menu javascript et ajax

JavaScript

Vue hybride

Discussions similaires

Partager

Partager