Right click JavaScript doesn't work on a table in PHP

Question

Hy, I have a problem with my JavaScript that I use it for the content of a table. My function is for users when they right click on a table row appears a context menu where they can choose what they want to do. The problem is that right click doesn't work any more when I go to the next pages in the table (my page load with 10 records in the table).

My script:

    <script type='text/javascript'>
$(window).load(function(){
(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;

                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();

                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);                        
                        var $selectedFileId = $menu.data("invokedOn").find('.datatable_fixed_column').attr('id');                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu, $selectedFileId);
                    });

                return false;
            });                     
            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });

        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;

            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) 
                position -= menu;

            return position;
        }    

    };
})(jQuery, window);

$("#datatable_fixed_column td").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu, id) {
        switch(selectedMenu.text()){
        case 'Modificare':{
            var rand = invokedOn.parent().children();
            var idpost = $(rand[0]).text();
            window.location.href = "organigrama_add.php?control=update&id=" + idpost;       
        }
        break;
        case 'Stergere':{
            var rand = invokedOn.parent().children();
            var marca = $(rand[1]).text();
            if (marca == '0')
            {
                var idpost = $(rand[0]).text();
                var departament = $(rand[5]).text();
                var subdepartament = $(rand[6]).text();
                var schimb = $(rand[9]).text();
                var functie = $(rand[10]).text();       
                var msg = "Sunteti sigur ca doriti sa stergeti aceasta inregistrare?" + "\nDepartament: " + departament + "\nSubdepartament: " + subdepartament + "\nSchimb: " + schimb + "\nFunctie: " + functie;
                var confirmare = confirm(msg);
                if (confirmare == true)
                {
                    window.location.href = "organigrama.php?control=delete&id=" + idpost;
                }
            }  
            else
            {
                var msg = "Nu se poate sterge acest post. Doar posturile libere se pot sterge.";
                alert(msg);
            }        
        }   
        break;  
        case 'Renunta':{
            return false;
        }
        break;
        }
    }
});
});
            </script>

And context menu used for this:

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
        <li><a tabindex="-1">Modificare</a></li>
        <li><a tabindex="-1" href="#">Stergere</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="">Renunt</a></li>
    </ul>

Edit: I forget to mention that the javascript is before the </body> end tag and context menu is after <body> start tag.

it would work if clicking the next page reloads the browser. or if not, you need to do contextMenu bindings in different way — Semi-Friends
– Semi-Friends, Commented Jun 28, 2017 at 7:48
Option with click next page of table it isn't good. It reloads again first page. And if I change from 10 records to show to 100 records, javascript works only for first 10 records. How can I bind contextMenu in other ways? — A. Dragos
– A. Dragos, Commented Jun 28, 2017 at 7:51
ok so you need to do something like this. $(document).on('contextmenu', target, function) — Semi-Friends
– Semi-Friends, Commented Jun 28, 2017 at 7:56
It works! I have changed $(this).on("contextmenu", function (e) { with $(document).on("contextmenu", function (e) { . target it doesn't need any more. Thank you! Can you make a post to check your answer to this question? — A. Dragos
– A. Dragos, Commented Jun 28, 2017 at 8:09
what happened there is, everytime you right click on your page, same context menu will show up. the target will specify the correct element to which will trigger the custom context menu when you right click on it. — Semi-Friends
– Semi-Friends, Commented Jun 28, 2017 at 8:15

Semi-Friends · Accepted Answer · 2017-06-28 08:20:20Z

3

so basically the problem here is that the newly added rows in the table will not get the bindings from the initial load of the page. so the fix needed here is to bind the event to the main document by using this

$(document).on('contextmenu', target, function)

this will allow jquery to run the specific function to a targeted element on 'right click/contextmenu' event

answered Jun 28, 2017 at 8:20

Semi-Friends

4806 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Right click JavaScript doesn't work on a table in PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related