context menu on many elements on the page

[labbyjoelMember]

Hi !

i’ve been able to implement your plugin on my project, But I hang on a problem.

I’ve got a page woth many on the same class “.personne”. ( exemple : )

I’ve binded the mousedown on each like this :


$('.personne').each(
function(index,item){
$(this).bind('mousedown', function (event) {
var rightClick = isRightClick(event);
if (rightClick) {
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
//console.dir(event);
return false;

}
}
);
}
);


on the itemclick event, I can get the item I clicked on the menu, but I would like to get the element I’ve right clicked ( for example the image ID >

Can you help me ??

thanks

joel

[supportParticipant]

Hi joel,

The ‘itemclick’ event allows you to get the clicked LI element. To get its id, you can use: var id = clickedElement.id;

 $('#jqxMenu').bind('itemclick', function (event) {
      var clickedElement = event.args;
      var id = clickedElement.id;
});

You can also trigger the ‘mousedown’ event of the Menu’s LI elements. The event.target returns the element that was clicked. The code should be added before the initialization of the jqxMenu.

$('#jqxMenu').find('li').bind('mousedown', function (event) {
       var element = event.target;
});

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[labbyjoelMember]

Thank you peter for this response but my purpose is not to get the id of the li, but the id of the image on which i bind the mouse down.

for remember :

$('.personne').each(function(index,item){$(this).bind('mousedown', function (event) {  ... 

with on the page :

<img class="personne ui-draggable" src="../img/worker.png">
<img class="personne ui-draggable" src="../img/worker.png">
<img class="personne ui-draggable" src="../img/worker.png">
<img class="personne ui-draggable" src="../img/worker.png">
<img class="personne ui-draggable" src="../img/worker.png">

I want to get the “it-|-10085” .

thanks

joel

ps: my previous message was not clear as some tags like

<img>

disapears.

[supportParticipant]

Hi Joel,

As the image is inside the LI element, you can get it using the jQuery find function and passing ‘img’ as parameter.

For example:

        $('#jqxMenu').bind('itemclick', function (event) {
                var element = event.args;
                var $img = $(element).find('img');
                if ($img.length > 0) {
                    var imgid = $img[0].id;
                }
            });

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[labbyjoelMember]

Peter,

The img is not in the LI, but in a table

<div class="crewTab" style="height: 209px;">
 <table>
  <tbody>
   <tr><td><img src="../img/worker.png" id="it-|-10150" class="personne ui-draggable"></td><td>Afif Dhib</td></tr>
   <tr><td><img src="../img/worker.png" id="it-|-10054" class="personne ui-draggable"></td><td>Alan Claes</td></tr>
   <tr><td><img src="../img/worker.png" id="it-|-10141" class="personne ui-draggable"></td><td>Alexandre Neuville</td></tr>
   <tr><td><img src="../img/worker.png" id="it-|-10001" class="personne ui-draggable"></td><td>Jean-François Mabille</td></tr>
   <tr><td><img src="../img/chief.png" id="it-|-10010" class="personne ui-draggable"></td><td>Joël Labby</td></tr>
   <tr><td><img src="../img/worker.png" id="it-|-10086" class="personne ui-draggable"></td><td>Michaël Marée</td></tr>
   <tr><td><img src="../img/worker.png" id="it-|-10085" class="personne ui-draggable"></td><td>Michel Kill</td></tr>
  </tbody>
 </table>
</div>

[supportParticipant]

Hi Joel,

I implemented a small demo for you with the jqxMenu widget. The demo shows how to get the image’s ID when the user right clicks on a table. Each image is in a separate table cell as in the code you sent us.

Online Sample: jquery-context-menu

Download: jquery-context-menu.zip

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[labbyjoelMember]

Thank you peter for trying to help me !! It’s highly appreciated !

I’ve first tried to bind the mouse event on the pictures themselves. I see you bin the event on the table.

I can tried this way, but I’ve got many tables containing images on the page.

i’ve put a html dump of the page here : http://www.labsinfo.be/jqw/page.html

and the function that treat the jqwmenu : http://www.labsinfo.be/jqw/extract.js

This page is not fully functionnal but I cannot give you access to this application because it’s an intranet application with many use of ajax and ldap connections. But it will give you a good idea of what i do !

The pictures are dragabble from the left column to the right ones. I jus want to add a context menu on each pictures to be able to implement actions on specific people (like set chief of the crew)

The problem in your example is that you cannot right click directly on the picture but only on the table case. If you right click on the img, the menu open but the img id is not shown.

thanks

joel

[supportParticipant]

Hi Joel,

I’d like to ask you to send us (if applicable) the ‘dump’ sample to support@jqwidgets.com because we would like to test and debug it locally.

Best Regards,
Peter Stoev

jQWidgets Team
http://jqwidgets.com

[Author]

Posts