getting an element id from a plain javascript call

Question

This example is simplified a bit, but in my ASP.NET web page in my c#/jquery code I am using a right hand context menu that displays ‘rightMenu’ when a right mouse is clicked.

$(document).ready(function() {

    $(".RH_signoffrow td").contextMenu({
        menu: 'rightMenu'
    },
        function(action, el, pos) {

        var mykey = getkeyforitem(el);
        mykey = "Details|" + mykey;

       alert(
            'Action: ' + action + '\n\n' +
            'Key is: ' + mykey 
        );
        if(action == "details"){
            trigger_details_panel(mykey);
        }

    });

};


//for any td in the right hand side - get its row key
function getkeyforitem(el){
   var mykey = $(el).parent().find('.hiddenrowkey').text();
//   alert(
//        'Internal getkeyforitem Call' + '\n\n' +
//        'Key is: ' + mykey 
//    );
    return mykey; 
};

The callback of the menu passes back the element that was clicked, and that can be used to pull the keydata out of the current table row. Once I have that keydata, I can use it to call the real function I was after: trigger_details_panel(mykey).

This works fine if I only want to use the right mouse, but I want to include an image in some of the rows, so that when the image is clicked, it produces the same effect,as the right mouse menu selection.

I am not sure how to accomplish that cleanly.

I can include an image that links to javascript in my page…

  <asp:ImageButton ID="imgDetails" runat="server" ToolTip="Show Details"
  ImageUrl="./images/details.gif" OnClientClick="showdetailsclicked();return
  false;"></asp:ImageButton>

But how can I get it to call the code:

getkeyforitem(el);

Or at least know the element (el) it belongs to? It seems like there should be a way to use the (this) pointer to get at what I want - but I don't see it. Am I just missing a more straightforward way to accomplish the whole problem?

Answer 1

If you replace the line:

var mykey = $(el).parent().find('.hiddenrowkey').text();

with

var mykey = $(el).parents("tr").find('.hiddenrowkey').text();

Then you can use this function to find the hidden rowkey from any element in the row.

Edit after comment:

You were right about using this. I'd probably do something like:

function showdetailsclicked(){ var rowKey = getkeyforitem(this);}

However, Im not sure if theres some issue with ASP, I doubt it, but you never know... You may have to do something like:

<asp:ImageButton ID="imgDetails" runat="server" ToolTip="Show Details"
  ImageUrl="./images/details.gif" OnClientClick="showdetailsclicked(this);return
  false;"></asp:ImageButton>

function showdetailsclicked(el){ var rowKey = getkeyforitem(el);}

Hope that helps!