Working with Jquery Context Menu

Question

In my MVC 4 application I am working on ContextMenus with jquery and quite a bit achieved that as well but currently I have been facing issues.

One of my view with the use of contextmenu looks like this: enter image description here

I need to add some menus(namely Move,Delete,Details) on the right click against each of the element(ex:First Document,Doc1 etc) for which my corresponding razor source is:

 <div class="row">
   @foreach (var item in Model)
     {
        <div id="[email protected]" class="col-sm-3 ">
        <a class="mylinks">@Html.DisplayFor(m => item.Name, new { @class = "thumbnail" })</a>

   <ul id="contextmenu1" class="jqcontextmenu">
     <li><a href="#">Item 1a</a></li>
     <li><a href="#">Item 2a</a></li>
     <li><a href="#">Item 3a</a>
       <ul>
         <li><a href="#">Sub Item 3.1a</a></li>
         <li><a href="#">Sub Item 3.2a</a></li>
         <li><a href="#">Sub Item 3.3a</a></li>
      </ul>
    </li>
 </ul>
}

and the script to achieve this is:

jQuery(document).ready(function($){
    $('a.mylinks').addcontextmenu('contextmenu1') 
})

also I have included a jscontextmenu js file to get it working.

But here my problem is that with this I am able to achieve the right click only for the first element only.I feel that with my document ready function the id for contextmenu1 will be applied to the first element only and in order to assign that against all of the names in the list I need to create some dynamic ids for the ul and then use it in my script .

I tried with some of the possibities using a counter and incrementing it and then assigning the class to the script function but that didnt work. So can anyone suggest the way of achieving this.Thanks in advance.

Your ul with id contextmenu1 is generated for each link (via @foreach) which is not valid, as the id should be unique. Try to put it out of @foreach. — dashtinejad
– dashtinejad, Commented Sep 23, 2014 at 9:41
Get rid of the id for the ul, and attach the contextmenu like this: $('a.mylinks').addcontextmenu($('a.mylinks').next('.jqcontextmenu')); — emerson.marini
– emerson.marini, Commented Sep 23, 2014 at 9:49
@ROX - I think with this I will not be able to assign the right click menus against each of the element. Also, on right click I need to send the Id for that element to the controller.So, can you please confirm? — Saroj
– Saroj, Commented Sep 23, 2014 at 9:49
@MelanciaUK, As per your comment, I removed the id from the ul and added your suggestion in my script removing the earlier one.But now on right click the menu options are not getting listed. — Saroj
– Saroj, Commented Sep 23, 2014 at 9:55
It's hard to guess without seeing an example with running code to debug. — emerson.marini
– emerson.marini, Commented Sep 23, 2014 at 10:03

dashtinejad · Accepted Answer · 2014-09-23 10:09:55Z

2

+50

Generate unique id for each contextmenu:

@foreach (var item in Model) {
    <a class="mylinks">@Html.DisplayFor(m => item.Name, new { @class = "thumbnail" })</a>

    <ul id="[email protected]" class="jqcontextmenu">
        <li><a href="#">Item 1a</a></li>
        <li><a href="#">Item 2a</a></li>
        <li><a href="#">Item 3a</a></li>
    </ul>
}

And in your js code:

jQuery(function () {
    jQuery('a.mylinks').each(function () {
        var id = jQuery(this).next('.jqcontextmenu').attr('id');
        jQuery(this).addcontextmenu(id);
    });
});

JSFiddle Demo.

answered Sep 23, 2014 at 10:09

dashtinejad

6,2734 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saroj Over a year ago

I see your fiddle working great and that is all I want but still after all this it is not working.I have been using jqcontextmenu.css and jqcontextmenu.js as src for this .Please guide me what else do I need to do..On right click the default MS links are visible.

Saroj Over a year ago

Ya ..its there..Uncaught TypeError: Cannot read property 'id' of undefined .

dashtinejad Over a year ago

@Saroj your <a> element and <ul> should be next to each other (like in my example). Or try this: var id = jQuery(this).closest('.row').find('.jqcontextmenu').attr('id');

Pedro Augusto Freitas de Souza · Accepted Answer · 2014-09-30 08:44:09Z

1

Probably, something like this should work?

jQuery(document).ready(function($){
   $('a.mylinks li')[0].addcontextmenu('contextmenu1') 
 })

answered Sep 30, 2014 at 8:44

Pedro Augusto Freitas de Souza

9607 silver badges17 bronze badges

Comments

Murad · Accepted Answer · 2017-03-08 13:59:07Z

It’s time to make the things realistic, it’s time to add some jQuery. try this one!!

 <br>
$(document).bind(“contextmenu”, function (e) {<br>
    e.preventDefault();                 // To prevent the default context menu.<br>
    $(“#cntnr”).css(“left”, e.pageX);   // For updating the menu position.<br>
    $(“#cntnr”).css(“top”, e.pageY);    // <br>
    $(“#cntnr”).fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.<br>
});<br>
function startFocusOut() {<br>
    $(document).on(“click”, function () {   <br>
        $(“#cntnr”).hide(500);              // To hide the context menu<br>
        $(document).off(“click”);           <br>
    });<br>
}<br>
$(“#items > li”).click(function () {<br>
    $(“#op”).text(“You have selected “ + $(this).text());  // Performing the selected function.<br>
});<br><br>

The above code is very simple. First we are binding context menu listener to document so that we can handle it. startFocusOut() function is used for monitoring the focus lost or to monitor the off menu click. If that click is happened then context menu will be hidden. Click listener on list item is used to perform the selected operation

Collectives™ on Stack Overflow

Working with Jquery Context Menu

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related