Récupérer Id ContextJS

Version imprimable

02/12/2013, 15h41
crazyyann

Récupérer Id ContextJS

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.
02/12/2013, 16h36
SpaceFrog

attr('id')
03/12/2013, 14h27
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.
03/12/2013, 14h33
SpaceFrog

tu as un bout de code ?
03/12/2013, 15h06
crazyyann
Ci dessous le code permettant d'associer le menu déroulant aux elements de ma page ayant pour class "MaClass"
Code:

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.

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

Code:

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},
])

03/12/2013, 16h51
crazyyann

J'y avais pensé mais this.id me retourne undefined.:(
03/12/2013, 17h02
SpaceFrog

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

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

Code:

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

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.

04/12/2013, 10h32
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".

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:

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:

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},
]);

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:

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}, ]);

05/12/2013, 15h39
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.

Bonsoir

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

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

Code:

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:

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
	};
})();

09/12/2013, 09h25
crazyyann

Bonjour,

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

Citation:

TypeError: that is null

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

Encore merci pour le coup de main.

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

Code:

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

12/12/2013, 18h41
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).
13/12/2013, 09h28
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.
13/12/2013, 09h35
danielhagnoul

Citation:

Envoyé par crazyyann

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. :applo: