Discussion :

[juju77]

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 php :

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
//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 :

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
$(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

[NoSmoking]

Bonjour,
tu définies une action sur des éléments qui n'existent pas encore dans le DOM, chargement via Ajax, regarde à mettre ton écouteur sur le conteur des éléments chargés.

[juju77]

Bonjour NoSmoking, merci pour ta réponse, j'ai essayé de comprendre mais je n'y suis pas arrivé haha.

- Les éléments qui n'existent pas encore dans le dom tu parlais du menu j'imagine ?

- Mon écouteur ici c'est fadeIn() ? Et faudrait que je compte les éléments présent dans : $contenu_div

(Je suis un peu largué dans ce langage j'vais essayer de me trouver des cours mais là c'était urgent : /)

Cependant j'ai trouvé une solution alternative qui marche nikel je la poste pour les autres :

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
 
function menu_ajax() {	
	?>
   	<script>
function show(form)
{
	if (form=="")
	{
		return;
	}
 
	else if (form=="start")
	{
	document.getElementById('FormArea1').style.display = 'block';
		document.getElementById('FormArea2').style.display = 'none';
	}
	else if (form=="part")
	{
	document.getElementById('FormArea2').style.display = 'block';
		document.getElementById('FormArea1').style.display = 'none';
	}
 
}
 	</script>
<?php
 
$retour='<select name="LeagueSelect" onchange="show(this.value)">
	<option value="">- Select form -</option>
	<option value="start">Argent</option>
	<option value="part">Bronze</option>
 
</select>
 
<div id="FormArea1" style="display:none;">
 
[show_ligue=argent]
 
</div>
 
<div id="FormArea2" style="display:none;">
 
[show_ligue=bronze]
 
</div>';
 
 
return $retour;
 
}add_shortcode( 'menu_league', 'menu_league' );

[SpaceFrog]

voir on() par délégation à partir du parent...

Code :

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

$('parent').on('click','enfant', function(){ ... })