Discussion :

[Lili72430]

Bonjour,

Tout d'abord, avant d'exposer mon problème, je vous explique ce que je souhaite faire :
- charger un menu avec jQuery dans une page Web avec la fonction load,
- une fois ce menu chargé, quand on clique sur un lien de ce menu, charger un fichier html pour afficher du contenu (toujours avec la fonction load).

Sachant que mon menu s'affiche avec la fonction load, le code HTML de ce menu ne s'écrit pas "en dur" dans ma page Web... Donc pour appliquer de nouveau un load dessus, j'utilise le plugin Live Bind. Seul problème, dans une fonction dépendant de Live Bind, je n'arrive pas à appliquer la méthode load (toutes les autres fonctions passent) ; voici donc mon code :

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
 
function chargeTexte()
{
	//repérer un clic effectué sur un des liens "<a>" de la liste appartenant au div "#descr_sousMenu"
    $.live_bind("#descr_sousMenu ul li a").each(function(){
 
    //pour chaque lien cliqué :
     $(this).click(function(){
 
        //on récupère son id (de la forme "_monId")
        //le fichier à charger après le clic a un nom de la forme "monId.html" donc on supprime l'underscore en début de l'id
        //puis on ajoute l'extension ".html" et on demande d'aller chercher le bon fichier dans le bon dossier...
        var lien = $(this).attr("id");
        lien = lien.substr(1,lien.length-1);
 
        //juste pour tester 
        alert("ajax/contenus/"+lien+".html"); 
 
        //le div "#contenu" doit afficher le texte correspondant au lien cliqué
        $("#contenu").load("ajax/contenus/"+lien+".html");
 
        });
 
	});
 
}

Autre problème : mon "each" ne fonctionne pas ! :'-(
Synthaxe incorrecte ?

Merci d'avance pour votre aide !

PS : je précise que je débute avec jQuery !

[marcha]

Salut,

Je connais pas livebind, mais une chose me semble étrange.

Avec JQuery un selecteur tel que "#descr_sousMenu ul li a" représente
tous les liens de ton menu et pour affecter un click, nul besoin d'utiliser
each.

$("#descr_sousMenu ul li a").click( function() { } ); suffit a assigner le click
à chaque liens.

Code :

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

1
2
3
4
5
 
var lien = $(this).attr("id");
lien = lien.substr(1,lien.length-1);
// peut s'écrire dans ton cas:
var lien = $(this).attr("id").substring(1);

A noter aussi, puisque tu débute avec JQuery, qu'il serait très facile
d'étendre JQuery avec une methode url() qui fait le code ci-dessus,
ainsi tu pourrais écrire simplement var lien = $(this).url();

Je pense aussi que tu ferais mieux d'utiliser le contenu du href pour stocker
l'url, ça évite le risque d'avoir deux id identiques (supposons que deux liens
doivent pointer sur une même page dans ton menu) et ça évite de devoir
supprimer ton #

[Lili72430]

Merci pour ces conseils !
Je vais essayer de les mettre en application !

[Lili72430]

C'est bon, j'ai trouvé la solution... en fin de compte, il y avait pas mal d'étourderies ! :
J'utilise toujours le plugin "Live Bind", téléchargeable ici : http://plugins.jquery.com/node/3700
Mon code au final donne ceci :

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
 
$(document).ready(function(){
 
	$("#sousMenu").hide();	//on cache le menu
    $("#contenu").hide(); //on cache la partie texte du site
	showSousMenu(); 
	chargeTxt();    
}); 
 
function showSousMenu(){
 
      //1) pour chaque lien survolé du div "#nav", on fait apparaître le menu.
      // Suivant l'id survolé, le contenu du menu change
      // donc pour afficher le bon menu en fonction du lien, on se base sur l'id
      $("#nav ul li a").mouseover(function(){
 
               $("#sousMenu").fadeIn(2000);			  
 
                var identifiant = $(this).attr("id"); //récupérer l'id de chaque lien de type "<li><a>"
 
                // charger le fichier html dont l'identifiant correspondant à l'id
                $("#sousMenu").load("ajax/sousmenu/"+identifiant+".html");		
 
      });
}
 
function chargeTxt()
{
 
     //pour chaque lien cliqué, inclure le texte correspondant en se référant à l'attribut "rel" du lien (un id étant unique, on évite ainsi des problèmes de doublons)
	 //Live Bind permet l'insertion de contenus à partir d'éléments HTML eux-mêmes chargés par jQuery (dans cet exemple, le menu)
     $.live_bind("#descr_sousMenu ul li a", 'click', function(){
 
        var txt = $(this).attr("rel");
 
        //le div "#contenu" doit afficher le texte correspondant au lien cliqué
		$("#contenu").slideDown("slow");
        $("#contenu").load("ajax/contenus/"+txt+".html");
 
      });
}

Il permet d'appliquer des fonctions jQuery sur des portions de code elles-mêmes injectées dans la page avec jQuery... Sans Live Bind, étant donné que la 1ère partie de code est chargée avec jQuery, elle n'est pas écrite "en dur" dans la page donc il est difficile d'y appliquer des événements jQuery. Live Bind permet de pallier à ce problème.
Voir la doc jQuery pour plus d'infos : http://docs.jquery.com/FAQ#Why_do_my...JAX_request.3F

En espérant que ça pourra aider...

@+
Aurélie