jQuery-contextMenu - $.contextMenu is not a function

Question

I try to use the contextMenu Plugin, but I get $.contextMenu is not a function.

I tried it like in the demo.

I can't figure out what I am doing wrong.

$(function() {
        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: " + key;
                alert(m); 
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut"},
               copy: {name: "Copy", icon: "copy"},
                "paste": {name: "Paste", icon: "paste"},
                "delete": {name: "Delete", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        }); 
});

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/swisnl/jQuery-contextMenu/master/src/jquery.contextMenu.js"></script>




<span class="context-menu-one btn btn-neutral">right click me</span>

Kerin

You should load jQuery before jquery.contextMenu.js... – Tibold

I tried it already, made no difference. – Kerin

Use this link as the plugin source: cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.6.4/… – Tibold

That worked! Thx!! – Kerin

But it seems like there is more dependencies missing. The design looks bad or does not appear. – Kerin

Look here... There is a CSS file too. ;) – Tibold

Thx, the author should update his demo page and explain how to implement his code... – Kerin

check the developer tools console ... Loading failed for the <script> with source “https://raw.githubusercontent.com/swisnl/jQuery-contextMenu/master/src/jquery.contextMenu.js”. - possibly the content-type – Chaffer

@JaromandaX I added type="text/javascript" but it made no difference. – Kerin

you can't tell the server what content-type header to use! Though, I'm not sure that is the problem, but it does state that the script can't be loaded in the developer tools console – Chaffer

It must be the problem, but why does type="text/javascript" not solve it? – Kerin

@Kerin — The type attribute tells the browser what it should expect to find at the other end of the URL. The Content-Type HTTP response header is authoritative. – Bornstein

Answer 1

code must outside jquery

this example code work for me

 <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.8.0/jquery.contextMenu.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.8.0/jquery.contextMenu.min.js"></script>

(function($) {
        $(document).ready(function() {
            var cutRow = null;
            // Your code that uses $.contextMenu
            $.contextMenu({
                selector: '#R-T1',
                callback: function(key, options) {
                    if (key === "cut") {
                        cutRow = $(this).detach();
                    } else if (key === "paste") {
                        if (cutRow) {
                            $("#requirement").append(cutRow);
                            cutRow = null;
                        }
                    }
                },
                items: {
                    "edit": {name: "Edit", icon: "edit"},
                    "cut": {name: "Cut", icon: "cut"},
                    "copy": {name: "Copy", icon: "copy"},
                    "paste": {name: "Paste", icon: "paste"},
                    "delete": {name: "Delete", icon: "delete"},
                    "quit": {name: "Quit", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
                }
            });
        });
    })(jQuery);

Mccown

That's nonsense in two different ways. First you say that it needs to be outside document ready, then you put it inside document ready in your code example. Second $(...) is a shorthand for $(document).ready(...), so you're redundantly nested two calls to document ready. – Bornstein

i have updated, i mean dont use jquery $ but use jquery, it have conflic with jquery contextmenu – Mccown

No, it doesn’t. – Bornstein