Discussion :

[crazyyann]

Bonjour à tous,

j'utilise le plugin ContextJS qui permet d'afficher un menu contextuel au clique droit sur un élément (DIV, TD, ...) d'une page.

Je ne parviens pas à récupérer l'ID de cet élément, quelqu'un pour me donner un coup de main?

D'avance merci.

[SpaceFrog]

attr('id')

[crazyyann]

Merci pour ta réponse.

Je vois bien comment récupérer l'ID de l’élément à l'aide de attr('id') mais comment le passer en paramètre des href de mon menu contextuel créé à l'aide de ContextJS.

[SpaceFrog]

tu as un bout de code ?

[crazyyann]

Ci dessous le code permettant d'associer le menu déroulant aux elements de ma page ayant pour class "MaClass"

Code :

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

1
2
3
4
5
context.attach('.MaClass', [
    {header: 'Mon menu'},
    {text: 'Lien 1', href: 'http://MaPage.html?MonParam=Id'},
    {text: 'Lien 2', href: 'http://MaPage2.html?MonParam=Id'},
])

Je souhaiterais donc passer en param de mes liens l'Id de l’élément sur lequel j'ai fait un clic droit.

Encore merci.

[SpaceFrog]

Au vu du code donné pour GA, j'aurais tenté un truc du genre

Code :

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

1
2
3
4
5
6
context.attach('.MaClass', [
 
    {header: 'Mon menu'},
    {text: 'Lien 1', href: 'http://MaPage.html?MonParam='+this.id},
    {text: 'Lien 2', href: 'http://MaPage2.html?MonParam='+this.id},
])

[crazyyann]

J'y avais pensé mais this.id me retourne undefined.

[SpaceFrog]

tu est sur que l'element declencheur à un id ?
car pour le ga ça fonctionne ;

[crazyyann]

Comme tu peux le voir ci dessous, mon td a bien un id

Code html :

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

<td id="PositionSPP9873M" class="PositionSPP ">GA</td>

Code :

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

1
2
3
4
5
context.attach('.PositionSPP ', [		
	 {header: 'Mon menu'},
         {text: 'Lien 1', href: 'http://MaPage.html?MonParam='+this.id},
         {text: 'Lien 2', href: 'http://MaPage2.html?MonParam='+this.id},
]);

Au risque de passer pour un imbecile, t'entends quoi par GA?

Merci.

[danielhagnoul]

Bonjour

Il est possible que dans le contexte de la méthode attach() le "this" n'ait pas la valeur espérée. Sauvegarder la valeur de "this" dans "that" au début du fragment de code et utiliser "that.id".

[crazyyann]

Merci, j'ai ajouté that=this (voir ligne 102), un alert(that.id) m'affiche bien l'id de l’élément sur lequel j'ai fait un clic droit.

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
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
132
133
134
135
136
137
138
139
140
/* 
 * Context.js
 * Copyright Jacob Kelley
 * MIT License
 */

var context = context || (function () {
        that="";
   	var options = {
		fadeSpeed: 100,
		filter: function ($obj) {
			// Modify $obj, Do not return
		},
		above: 'auto',
		preventDoubleContext: true,
		compress: false
	};

	function initialize(opts) {
		options = $.extend({}, options, opts);
		
		$(document).on('click', 'html', function () {
			$('.dropdown-context').fadeOut(options.fadeSpeed, function(){
				$('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left');
			});
		});
		if(options.preventDoubleContext){
			$(document).on('contextmenu', '.dropdown-context', function (e) {
				e.preventDefault();
			});
		}
		$(document).on('mouseenter', '.dropdown-submenu', function(){
			var $sub = $(this).find('.dropdown-context-sub:first'),
				subWidth = $sub.width(),
				subLeft = $sub.offset().left,
				collision = (subWidth+subLeft) > window.innerWidth;
			if(collision){
				$sub.addClass('drop-left');
			}
		});
		
	}

	function updateOptions(opts){
		options = $.extend({}, options, opts);
	}

	function buildMenu(data, id, subMenu) {
		var subClass = (subMenu) ? ' dropdown-context-sub' : '',
			compressed = options.compress ? ' compressed-context' : '',
			$menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed+'" id="dropdown-' + id + '"></ul>');
        var i = 0, linkTarget = '';
        for(i; i<data.length; i++) {
        	if (typeof data[i].divider !== 'undefined') {
				$menu.append('<li class="divider"></li>');
			} else if (typeof data[i].header !== 'undefined') {
				$menu.append('<li class="nav-header">' + data[i].header + '</li>');
			} else {
				if (typeof data[i].href == 'undefined') {
					data[i].href = '#';
				}
				if (typeof data[i].target !== 'undefined') {
					linkTarget = ' target="'+data[i].target+'"';
				}
				if (typeof data[i].subMenu !== 'undefined') {
					$sub = ('<li class="dropdown-submenu"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');
				} else {
					$sub = $('<li><a tabindex="-1" href="' + data[i].href + '"'+linkTarget+'>' + data[i].text + '</a></li>');
				}
				if (typeof data[i].action !== 'undefined') {
					var actiond = new Date(),
						actionID = 'event-' + actiond.getTime() * Math.floor(Math.random()*100000),
						eventAction = data[i].action;
					$sub.find('a').attr('id', actionID);
					$('#' + actionID).addClass('context-event');
					$(document).on('click', '#' + actionID, eventAction);
				}
				$menu.append($sub);
				if (typeof data[i].subMenu != 'undefined') {
					var subMenuData = buildMenu(data[i].subMenu, id, true);
					$menu.find('li:last').append(subMenuData);
				}
			}
			if (typeof options.filter == 'function') {
				options.filter($menu.find('li:last'));
			}
		}
		return $menu;
	}

	function addContext(selector, data) {
			var d = new Date(),
			id = d.getTime(),
			$menu = buildMenu(data, id);
			
		$('body').append($menu);
		
		
		$(document).on('contextmenu', selector, function (e) {
			e.preventDefault();
			e.stopPropagation();
			that=this;
			alert(that.id);
			$('.dropdown-context:not(.dropdown-context-sub)').hide();
			
			$dd = $('#dropdown-' + id);
			if (typeof options.above == 'boolean' && options.above) {
				$dd.addClass('dropdown-context-up').css({
					top: e.pageY - 20 - $('#dropdown-' + id).height(),
					left: e.pageX - 13
				}).fadeIn(options.fadeSpeed);
			} else if (typeof options.above == 'string' && options.above == 'auto') {
				$dd.removeClass('dropdown-context-up');
				var autoH = $dd.height() + 12;
				if ((e.pageY + autoH) > $('html').height()) {
					$dd.addClass('dropdown-context-up').css({
						top: e.pageY - 20 - autoH,
						left: e.pageX - 13
					}).fadeIn(options.fadeSpeed);
				} else {
					$dd.css({
						top: e.pageY + 10,
						left: e.pageX - 13
					}).fadeIn(options.fadeSpeed);
				}
			}
		});
	}
	
	function destroyContext(selector) {
		$(document).off('contextmenu', selector).off('click', '.context-event');
	}
	
	return {
		init: initialize,
		settings: updateOptions,
		attach: addContext,
		destroy: destroyContext
	};
})();

En revanche MonParam est vide. Où déclarer la variable that? Je pense que le probleme vient de là.

Code :

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

1
2
3
4
5
context.attach('.PositionSPP ', [		
	 {header: 'Mon menu'},
         {text: 'Lien 1', href: 'http://MaPage.html?MonParam='+that.id},
         {text: 'Lien 2', href: 'http://MaPage2.html?MonParam='+that.id},
]);

[danielhagnoul]

Bonjour

En regardant le code du plugin, je crois que vous cherchez simplement à récupérer l'ID de l'élément du DOM correspondant à votre sélecteur, ici c'est '.PositionSPP '.

Code :

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

1
2
3
4
5
6
7
var elem = $( ".PositionSPP" )[ 0 ];
 
context.attach('.PositionSPP ', [
         {header: 'Mon menu'},
         {text: 'Lien 1', href: 'http://MaPage.html?MonParam='+elem.id},
         {text: 'Lien 2', href: 'http://MaPage2.html?MonParam='+elem.id},
]);

[crazyyann]

Merci d'avoir passé du temps à décortiquer le code du plugin.

En faite la class PositionSPP est appliquée aux cellules d'un tableau du coup en utilisant ton code, quelque soit la cellule sur laquelle je clique, elem.id me retourne l'id de la première cellule.

[danielhagnoul]

Bonsoir

Si le sélecteur contient plusieurs éléments ayant la même classe, le comportement décrit est logique.

Revenons à l'idée du that = this.

Code :

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

1
2
3
4
5
context.attach('.PositionSPP ', [		
	 {header: 'Mon menu'},
         {text: 'Lien 1', href: 'http://MaPage.html?MonParam='+that.id},
         {text: 'Lien 2', href: 'http://MaPage2.html?MonParam='+that.id},
]);

Avec pour Context.js :

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
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
132
133
134
135
136
137
138
139
140
/* 
 * Context.js
 * Copyright Jacob Kelley
 * MIT License
 */

var that = null;

var context = context || (function () {
   	var options = {
		fadeSpeed: 100,
		filter: function ($obj) {
			// Modify $obj, Do not return
		},
		above: 'auto',
		preventDoubleContext: true,
		compress: false
	};

	function initialize(opts) {
		options = $.extend({}, options, opts);
		
		$(document).on('click', 'html', function () {
			$('.dropdown-context').fadeOut(options.fadeSpeed, function(){
				$('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left');
			});
		});
		if(options.preventDoubleContext){
			$(document).on('contextmenu', '.dropdown-context', function (e) {
				e.preventDefault();
			});
		}
		$(document).on('mouseenter', '.dropdown-submenu', function(){
			var $sub = $(this).find('.dropdown-context-sub:first'),
				subWidth = $sub.width(),
				subLeft = $sub.offset().left,
				collision = (subWidth+subLeft) > window.innerWidth;
			if(collision){
				$sub.addClass('drop-left');
			}
		});
		
	}

	function updateOptions(opts){
		options = $.extend({}, options, opts);
	}

	function buildMenu(data, id, subMenu) {
		var subClass = (subMenu) ? ' dropdown-context-sub' : '',
			compressed = options.compress ? ' compressed-context' : '',
			$menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed+'" id="dropdown-' + id + '"></ul>');
        var i = 0, linkTarget = '';
        for(i; i<data.length; i++) {
        	if (typeof data[i].divider !== 'undefined') {
				$menu.append('<li class="divider"></li>');
			} else if (typeof data[i].header !== 'undefined') {
				$menu.append('<li class="nav-header">' + data[i].header + '</li>');
			} else {
				if (typeof data[i].href == 'undefined') {
					data[i].href = '#';
				}
				if (typeof data[i].target !== 'undefined') {
					linkTarget = ' target="'+data[i].target+'"';
				}
				if (typeof data[i].subMenu !== 'undefined') {
					$sub = ('<li class="dropdown-submenu"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');
				} else {
					$sub = $('<li><a tabindex="-1" href="' + data[i].href + '"'+linkTarget+'>' + data[i].text + '</a></li>');
				}
				if (typeof data[i].action !== 'undefined') {
					var actiond = new Date(),
						actionID = 'event-' + actiond.getTime() * Math.floor(Math.random()*100000),
						eventAction = data[i].action;
					$sub.find('a').attr('id', actionID);
					$('#' + actionID).addClass('context-event');
					$(document).on('click', '#' + actionID, eventAction);
				}
				$menu.append($sub);
				if (typeof data[i].subMenu != 'undefined') {
					var subMenuData = buildMenu(data[i].subMenu, id, true);
					$menu.find('li:last').append(subMenuData);
				}
			}
			if (typeof options.filter == 'function') {
				options.filter($menu.find('li:last'));
			}
		}
		return $menu;
	}

	function addContext(selector, data) {
			var d = new Date(),
			id = d.getTime(),
			$menu = buildMenu(data, id);
			
		$('body').append($menu);
		
		
		$(document).on('contextmenu', selector, function (e) {
			e.preventDefault();
			e.stopPropagation();
			that=this;
			$('.dropdown-context:not(.dropdown-context-sub)').hide();
			
			$dd = $('#dropdown-' + id);
			if (typeof options.above == 'boolean' && options.above) {
				$dd.addClass('dropdown-context-up').css({
					top: e.pageY - 20 - $('#dropdown-' + id).height(),
					left: e.pageX - 13
				}).fadeIn(options.fadeSpeed);
			} else if (typeof options.above == 'string' && options.above == 'auto') {
				$dd.removeClass('dropdown-context-up');
				var autoH = $dd.height() + 12;
				if ((e.pageY + autoH) > $('html').height()) {
					$dd.addClass('dropdown-context-up').css({
						top: e.pageY - 20 - autoH,
						left: e.pageX - 13
					}).fadeIn(options.fadeSpeed);
				} else {
					$dd.css({
						top: e.pageY + 10,
						left: e.pageX - 13
					}).fadeIn(options.fadeSpeed);
				}
			}
		});
	}
	
	function destroyContext(selector) {
		$(document).off('contextmenu', selector).off('click', '.context-event');
	}
	
	return {
		init: initialize,
		settings: updateOptions,
		attach: addContext,
		destroy: destroyContext
	};
})();

[crazyyann]

Bonjour,

en utilisant ton code, j'ai ce message d'erreur au chargement de la page

TypeError: that is null

{text: 'Lien 1', href: 'http://MaPage.html?MonParam='+that.id},

Encore merci pour le coup de main.

[crazyyann]

Voila, j'ai enfin trouvé comment récupérer mon id.

Code :

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

1
2
3
4
5
6
7
context.attach('.PositionSPP ', [		
	 {header: 'Mon menu'},
         {
                text: 'Lien 1',    action: function(e)
		{
			var monID=e.view.that.id;
                         ....

Encore merci à Danielhagnoul et SpaceFrog

[danielhagnoul]

Bravo, c'est Noël avant l'heure !

Je pense que si l'on avait disposer de tous les éléments (HTML, CSS, JS), pas seulement le code de ce "mauvais" plugin (documentation et démonstration lacunaire), on aurait pu voir dans quel contexte est utilisé context.attach( ... ) dans votre code et peut-être trouvé une réponse valable beaucoup plus vite sans devoir écrire une infâme rustine.

Au vu de "e.view", je pense à un "e.target.id" pour un "event" classique. En ajoutant "console.log( e, e.view );" dans le code, on peut examiner la composition de cet "e" et de cet "e.view" dans la console du navigateur (touche F12).

[crazyyann]

C'est justement grâce à console.log que j'ai trouvé la solution à mon probleme.

e.target.id contient l'id du lien de mon menu et pas l'id de l’élément sur lequel j'ai fait mon clic droit.

Encore merci pour l'astuce du that.

[danielhagnoul]

C'est justement grâce à console.log que j'ai trouvé la solution à mon probleme. [...]

Cela mérite un bravo et deux points d'approbation pour la persévérance et la méthode.