[AJAX] menu javascript et ajax
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:
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:
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
