Javascript syntax for objects in jquery

Question

I am trying to enhance my page with a jquery right mouse menu, but am having trouble building the correct structures to populate it easily.

Currently my page contains (among other things) a list of items for the user to review. (an html table) Based on the users role, and the current state and context of the row, the user may take one of various actions on each row of data. (approve, reject, refer it to someone else, ect.) My ASP.Net page handles this by setting the visibility of an imagebutton within the row to true, if the option is available. I can control the Cssclass of each button, and am setting the class of for example the "approve" button to “approvebtn”.

Now I want to enhance my site with a right menu. I am extending my site with Cory S.N. LaViska’s jQuery Context Menu Plugin - http://abeautifulsite.net/notebook/80

This plugin allows the default right mouse behavior for any elelement to be overridden with a user controlled context menu. The menu is inserted into your page as an unordered list and becomes visible when it is needed.

            <ul id="rightMenu" class="contextMenu">
                <li class="details"><a href="#details">Details</a> </li>
                <li class="addnote"><a href="#addnote">AddNote</a> </li>
                <li class="listnote"><a href="#listnote">ShowNotes</a> </li>
                <li class="approve"><a href="#approve">Approve</a> </li>
                <li class="reject"><a href="#reject">Reject</a> </li>
                <li class="release"><a href="#release">Release</a> </li>
                <li class="takeover"><a href="#takeover">Takeover</a> </li>
            </ul>

Your app gets a callback when something on the right menu is clicked, and you can interrogate the action (the bogus href element) to see which item it was. I really like this menu because it is simple to use and is completely CSS styled.

However, I need to do something that this plugin does not nativly seem to support. I need to change which items are available on the menu from row to row. Basically if an Imagebutton (for say approve) is avaiable in the row, then its corrisponding menu item should exist as well.

I was able to gain access to the menu just before it is displayed by altering the plugin slightly, to call my function right before the menu is displayed. This works, but the logic I had to write seems so brute force, that there must be a better way….

In my callback:

 function jimsbuggeredfunction(menu,el)

"el" is the element that was right clicked on (usually a table cell), and "menu" is the menu that this right click is bound to. (so I should be using that name and not hardcoding to #rightMenu')

So, the “if” line finds out if the table row containing the element that was “right clicked” contains a specific button (by its class name) if it does the menu item is enabled, otherwise it is disabled. This process continues for every menu item that I want to be flexable row-to-row.

function jimsbuggeredfunction(menu,el) {

 if($(el).parents("tr:eq(0)").find('.approvebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#approve');
 else
    $('#rightMenu').disableContextMenuItems('#approve');

 if($(el).parents("tr:eq(0)").find('.rejectbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#reject');
 else
    $('#rightMenu').disableContextMenuItems('#reject');

 if($(el).parents("tr:eq(0)").find('.releasebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#release');
 else
    $('#rightMenu').disableContextMenuItems('#release');

 if($(el).parents("tr:eq(0)").find('.takeoverbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#takeover');
 else
    $('#rightMenu').disableContextMenuItems('#takeover');

 if($(el).parents("tr:eq(0)").find('.revertbtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#revert');
 else
    $('#rightMenu').disableContextMenuItems('#revert');

 if($(el).parents("tr:eq(0)").find('.removebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#remove');
 else
    $('#rightMenu').disableContextMenuItems('#remove');

 if($(el).parents("tr:eq(0)").find('.addnotebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#addnote');
 else
    $('#rightMenu').disableContextMenuItems('#addnote');

 if($(el).parents("tr:eq(0)").find('.listnotebtn').length > 0) 
    $('#rightMenu').enableContextMenuItems('#listnote');
 else
    $('#rightMenu').disableContextMenuItems('#listnote');
};

There must be a better way to set this up, so that it also just ignores menu items that I want to display all of the time) but it is escaping me at the moment. Is there a better way to accomplish this?

Thanks,

Jim

Answer 1

I would find some way to create a mapping between the two IDs and some more systematic way of finding the relevant button. For example, if the button always belongs inside a certain cell that has a class, let's say "buttonclass", then something like this should work:

var mapping = {
  takeoverbtn: '#takeover',
  listnotebtn: '#listnote'
  // ...
};


function jimsbuggeredfunction(menu,el) {
    var buttontype = $(el).parents("tr:eq(0)").find('.buttonclass').children().attr("class");
    $('#rightMenu').disableContextMenuItems(mapping[buttontype]);
}

My jQuery is a little rusty, there's probably a cleaner way of retrieving the buttontype, but that general idea ought to work.