[plugin Context Menu] je n'arrive pas à le faire fonctionner correctement

Version imprimable

Bonjour,

je désirerais intégrer ce plugin a mon projet.

Malgres la même architecture DOM je n'arrive pas à le faire fonctionner correctement.

L'exemple fonctionne sur ce DOM :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div id="myList">
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
		<li>Item 5</li>
		<li>Item 6</li>
	</ul>
</div>

Appel du plugin :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$("#myList UL LI").contextMenu({
	menu: 'myMenu'
}, function(action, el, pos) {
	alert(
		'Action: ' + action + '\n\n' +
		'Element text: ' + $(el).text() + '\n\n' + 
		'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
		'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
		);
});

Mon DOM :

Code:

1
2
3
4
5
6
7
8
9
 
<div id="browserServ" class="browserServ">
     <ul class="jqueryFileTree" style="">
           <li class="directory collapsed">dossier1</li>
           <li class="directory collapsed">dossier2</li>
           <li class="directory collapsed">dossier3</li>
           <li class="directory collapsed">dossier4</li>
      </ul>
</div>

Mon appel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#browserServ UL LI ").contextMenu({
     menu: "myMenu"
},
function(action, el, pos) {
     alert(
            "Action: " + action + "\n\n" +
             "Element ID: " + $(el).attr("id") + "\n\n" +
              "X: " + pos.x + "  Y: " + pos.y + " (relative to element)\n\n" +
              "X: " + pos.docX + "  Y: " + pos.docY+ " (relative to document)"
             );
});

Cependant, lorsque mon appel contient le UL LI, le plugin ne s'active pas mais si mon appel ne contien que l'id de ma div ( $("#browserServ).contextMenu(...); ) le plugin s'active bien mais je n'ai pas accès a l'ID de l’élément sur lequel j'ai cliqué .

J'ai essayé d'être le plus clair possible ( même si ce post me semble pas clair du tout ! ^^ )

merci d'avance pour votre aide.

13/04/2011, 10h15
x-zolezzi

Si j'ai bien compris, lorsque tu enlèves UL LI de ton sélecteur le plugin fonctionne sauf que tu n'arrives pas à obtenir l'id de l'élément cliquer ?

Est-ce que ton code est en ligne, pour que je puisse voir ?

Essai avec firebug pour savoir quels sont les éléments que tu as.

Essai de remplacer $(el).attr("id") par $(this).attr('id')
13/04/2011, 14h50
madd63

Désolé, je n'avais pas vu t'as réponse.

oui c'est bien cela, et logiquement, lorsque j’enlève le UL LI, je récupère la div sur laquel j'ai cliqué ( sans grand intérêt )
je ne peux pas le mettre en ligne pour le moment, mais si tu as un peu de temps, je peux te share mon ecran.

j'ai eu un problème avec ce plugin, j'ai essayé cette fois de le mettre sur un UL ( ailleurs, rien a voir avec celui la ), et encore une fois , ça marche quand je le fais dans l'exemple et ça marche pas quand je l’intègres... je ne comprend pas vraiment les différences...

Merci d'avoir pris le temps de me répondre
13/04/2011, 14h59
x-zolezzi

Es ce que tu pourrai mettre en ligne les deux versions (avec UL LI et sans) comme ça je peux regarder ?

Bas le code avec le UL LI est un dans le premier message

et le deuxième :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#uploadList").contextMenu({
      menu: "listMenu"
},
      function(action, el, pos) {
          alert(
              "Action: " + action + "\n\n" +
              "Element ID: " + $(el).attr("id") + "\n\n" +
              "X: " + pos.x + "  Y: " + pos.y + " (relative to element)\n\n" +
              "X: " + pos.docX + "  Y: " + pos.docY+ " (relative to document)"
           );
       });

je vois sincèrement pas de différence entre ce qu'ils proposent et ce que je met. :s

13/04/2011, 19h10
x-zolezzi

Le menu s'ouvre sur le deuxième code ?
14/04/2011, 09h22
madd63

le menu s'ouvre pas dans le 2em cas.
Par contre, j'arrive à ouvrir le menu si j’enlève le UL LI dans le 1er cas...
je t'avouerais que j'y comprend plus grand chose...

(je vais essayer d'être plus présent sur le forum aujourd'hui, merci bcp de prendre le temps de me répondre)
15/04/2011, 15h38
x-zolezzi

Passe moi la page HTML que tu veux faire avec le code jQuery comme ça je jette un oeil directement
15/04/2011, 16h41
madd63

le problème c'est que c'est des une architecture généré en JS/PHP donc c'est pas évident de te passer le html.

Je vois ce que je peux faire

edit: c'est pas vraiment évident de te passer une page HTML Simple puisque je pense qu'il faut reproduire la génération du DOM. Je fais au plus vite ( dsl pour l'attente )

Edit 2 : Plus simple en fait.
J'aimerais juste "combiner" avec ce plugin et récupérer le fichier ou dossier sur lequel j'ai cliqué. Ça sera plus simple que de te passer un "exemple" bancal qui serai pas forcement parlant. :s

Merci beaucoup pour les réponses.
15/04/2011, 18h08
SPACHFR

Salut,

Juste en passant, je n'ai pas ta solution, mais j'utilise le plugin jstree qui intrègre également contextmenu.
Plugin très riche en fonctionnalités compatible FF et IE6 IE7 IE8 et IE9
16/04/2011, 18h46
madd63

Merci pour ta réponse.

Je testerais si je trouve pas de solution mais je t'avouerais que j'aimerais bien comprendre pourquoi j'arrive pas a faire fonctionner ce plugin :s

je regarde si il inclu pas la réponse à mon problèmes ;)
17/04/2011, 10h08
NoSmoking

essaies peut être de revenir à des styles minimalistes

Code:

<div id="browserServ" class="browserServ">

ID et class du même nom pas franchement utile
18/04/2011, 09h10
madd63

Citation:

Envoyé par NoSmoking

essaies peut être de revenir à des styles minimalistes

Code:

<div id="browserServ" class="browserServ">

ID et class du même nom pas franchement utile

C'etait juste "temporaire" cette combinaison de class & ID ( j'ai rajouté l'id puisque dans l'exemple, il utilise un ID au lieux d'une classe ) mais après vérification ca ne change rien :s

je creuse je creuse ... ^^
18/04/2011, 09h17
madd63

Citation:

Envoyé par SPACHFR

Salut,

Juste en passant, je n'ai pas ta solution, mais j'utilise le plugin jstree qui intrègre également contextmenu.
Plugin très riche en fonctionnalités compatible FF et IE6 IE7 IE8 et IE9

Je viens de tester votre plugin, il ne se base pas sur un système de fichier mais sur une base de données non ?

une question me taraude...
tes UL LI ont-ils une ID comme c'est ce que tu souhaites récupérer

Code:

1
2
3
4
5
6
7
8
function(action, el, pos) {
  alert(
    "Action: " + action + "\n\n" +
    "Element ID: " + $(el).attr("id") + "\n\n" +  // <- RECUPE ID ICI
    "X: " + pos.x + "  Y: " + pos.y + " (relative to element)\n\n" +
    "X: " + pos.docX + "  Y: " + pos.docY+ " (relative to document)"
    );
}

18/04/2011, 10h35
madd63

ok, j'avou la j'ai merdé... donc oui merci je récupères maintenant l'ID.

Merci beaucoup pour ta réponse.

Cependant, ou placer mon initialisation du menu puisque lorsque je le met dans le "showTree", il ne fonctionne qu’après avoir ouvert un dossier alors qu'il est déjà passé dedans ( normalement?! )
18/04/2011, 18h52
NoSmoking

je dirais sur le $(document).ready à priori, mais ne connaissant pas le "showTree" et ce qu'il fait ....je m'abstiens de répondre, enfin presque!
19/04/2011, 09h08
madd63

Le show tree affiche le tree de dossier (c'est une méthode du plugin)

vu que je vois le tree lors du chargement de la page, je suppose qu'il passe forcement dedans lors de l'initialisation du DOM...