0

I have used this as inspiration and reference

Use Bootstrap 3 dropdown menu as context menu

How to get id like "invokedOn" text by a right click event with Bootstrap ContextMenu?

I can't figure out how to transfer my table variable "FlyID" to the selected "Context menu". The idea is to use the "FlyID" value as a parameter when the menu item is selected.

I have tried the code below without succes (and some other approaches).

<table id="myTable" class="table table-hover">
<thead>
    <tr class="flightclm" FlyID="TY56">
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
</thead>
<tbody>
    <tr class="flightclm" FlyID="ER45">
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr class="flightclm" FlyID="OP23">
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr class="flightclm" FlyID="JK23">
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
    </tr>
</tbody>
</table>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

$(document).ready(function () {

  $.fn.contextMenu = function (settings) {

    return this.each(function () {

        // Open context menu
        $(this).on("contextmenu", function (e) {
            //open menu
            $(settings.menuSelector)
                .data("invokedOn", $(e.target))
                .show()
                .css({
                    position: "absolute",
                    left: getLeftLocation(e),
                    top: getTopLocation(e)
                })
                .off('click')
                .on('click', function (e) {
                    $(this).hide();

                    var $invokedOn = $(this).data("invokedOn");
                    var $selectedMenu = $(e.target);
                    var $flightID = $(this).data("invokedOn").find('.flightclm').attr('FlyID');

                    settings.menuSelected.call(this, $invokedOn, $selectedMenu, $flightID);
            });

            return false;
        });

        //make sure menu closes on any click
        $(document).click(function () {
            $(settings.menuSelector).hide();
        });
    });

    function getLeftLocation(e) {
        var mouseWidth = e.pageX;
        var pageWidth = $(window).width();
        var menuWidth = $(settings.menuSelector).width();

        // opening menu would pass the side of the page
        if (mouseWidth + menuWidth > pageWidth &&
            menuWidth < mouseWidth) {
            return mouseWidth - menuWidth;
        } 
        return mouseWidth;
    }        

    function getTopLocation(e) {
        var mouseHeight = e.pageY;
        var pageHeight = $(window).height();
        var menuHeight = $(settings.menuSelector).height();

        // opening menu would pass the bottom of the page
        if (mouseHeight + menuHeight > pageHeight &&
            menuHeight < mouseHeight) {
            return mouseHeight - menuHeight;
        } 
        return mouseHeight;
    }

};

$("#myTable td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu, flightID) {
    var msg = "You selected the menu item '" + selectedMenu.text() +
        "' on the value '" + invokedOn.text() + "' and flightID : '" + flightID + "'  ";
    alert(msg);
}
});
Community
  • 1
  • 1
Ulrik Hvidtfeldt
  • 3
  • 4

1 Answers1

0

Got it !!

I expected the "caller" to be < TR > but natually it was my < TD > calling, so I need to address the callers parent < TD >. I changed

var $flightID = $(this).data("invokedOn").find('.flightclm').attr('FlyID');

To

var $flightID = $(this).data("invokedOn").closest('tr').attr('FlyID');
Ulrik Hvidtfeldt
  • 3
  • 4