1

I am trying to access attributes on the DIV tag that is acting as the trigger for a JQuery-UI Context Menu, but am struggling.

In a school context, I will have the name of a student in the text of the DIV, but I need to also pass through an ID number, perhaps using an HTML5 data-pid arribute, or the DIV's ID if necessary.

I can't access either and would really appreciate some guidance.

I am using the contemporary version 1.12.0 of ContextMenu and JQuery 3.0.0.

Please see below my code. Thanks in advance.

    <div id="TheIDIWantToAccess" data-pid="AnotherWantedVariable" class="hasStudentContextMenu"><p>The inner text which is showing fine using $target.text()</p></div>

    <script type="text/javascript">
    $( document ).ready(function() {
        $("#studentContextMenus").contextmenu({

            delegate: ".hasStudentContextMenu",
            preventContextMenuForPopup: true,
            menu: []
            ,beforeOpen: function(event, ui) {
                var $menu = ui.menu,
                    $target = ui.target;

                $(this).contextmenu("replaceMenu",
                    [
                        {title: "<b>" + $target.text() + "</b>"}
                        ,{title: "Award"
                            ,children: [
                            {title: "1_Point", action: function(event, ui) { alert("1 point awarded: " + $target.text() + " (" + $target.id() + ")");}},
                            {title: "2_Points", action: function(event, ui) { alert();} },
                            ]
                        }
                    ]
                );
            }
            ,select: function(event, ui) {
                //alert("select " + ui.target.attr("id"));
            }
        });
    });
</script>
Richard
  • 13
  • 2

1 Answers1

0

$target.id() is not a valid jQuery method. Use $target.attr("id") instead. There is also a .data() method.

mar10
  • 14,320
  • 5
  • 39
  • 64
  • Thanks for answering. See my reply as another question answer due to its length. – Richard Jun 27 '16 at 22:36
  • Editing your original question might be a better way. Anyway: it might have to do with your html markup. Could you set up a jsFiddle or Plunker for an example? http://jsfiddle.net/mar10/6o3u8a88/ – mar10 Jun 28 '16 at 06:37
  • Thank you for your pointers. It seems that it is the issue is the fact that the DIV is delivered from behind an AJAX data call for a DataTables display. It must be something to do with it not being accessible in terms of the DOM, but not found a solution yet. – Richard Jun 29 '16 at 12:27