[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