Lien menu ajax qui ne réagissent pas
Bonjour tout le monde,
J'ai besoin de réaliser une sorte de menu en ajax afin de pouvoir changer le contenu de la page sans la recharger, j'ai donc chercher tutoriel j'en ai testé pas mal mais j'ai un petit soucis, lorsque je clic sur mes liens il ne se passe rien du tout comme si le link était désactivé.
Je pense que ca doit être un truc bidon...
Ah oui et j'utilise wordpress, je fais appel à ce menu grâce à un shortcode (peut être le soucis ?)
Je vous poste le code :
Ma fonction wordpress :
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
| //MENU Ligue
function menu_league() {
$retour ='<div id="menu">
<ul id="nav">
<li><a href="pages/?p=index">Index</a></li>
<li><a href="pages/?p=cours">Cours</a></li>
<li><a href="pages/?p=membres">Membres</a></li>
<li><a href="pages/?p=contact">Contact</a></li>
</ul>
</div>
<div id="contenu">
<div>Contenu de la page "Index"</div>
</div>';
if(isset($_GET['p']) && !empty($_GET['p'])) {
$p = htmlentities($_GET['p']);
switch($p) {
case 'index': $contenu = 'Contenu de la page "Index"';
break;
case 'cours': $contenu = 'Contenu de la page "Cours"';
break;
case 'membres': $contenu = 'Contenu de la page "Membres"';
break;
case 'contact': $contenu = 'Contenu de la page "Contact"';
break;
default: $contenu = 'Page inconnue';
break;
}
$retour.= $contenu;
}
return $retour;
}add_shortcode( 'menu_league', 'menu_league' ); |
Et m fonction Ajax :
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
| $(document).ready(function() {
var $contenu_div = $('#contenu div');
var page = $('#nav li a:first').text(); // par défaut c'est Index
// au clic sur un lien du menu
$('#nav li a').on('click', function() {
var url = $(this).attr('href'); // on récupère le href
// on récupère le nom de la page demandée
var pageDemandee = $(this).text();
// si on appelle une page qui n est pas celle affichée
if(pageDemandee != page) {
// on met en mémoire la page
page = pageDemandee;
// chargement dans la div
$.ajax({
url: url,
cache: false,
success: function(html) {
$contenu_div.hide().html(html).fadeIn();
}
});
}
return false;
});
}); |
Merci d'avance pour votre aide :)
