How to Use contextMenu.js

Question

I have been trying to figure out how to use the contextMenu.js plugin from s-yadav.

I've downloaded the js and css files and saved them into the same folder as my php script.

The examples for the plugin are on this page: http://ignitersworld.com/lab/contextMenu.html#demo

However, I'm struggling to figure out how to activate them on the page. I assume I need to call the plugin and then the script needs to go between tags.

However, this does not produce anything. The code is below. Can anyone point me in the right direction?

Thank you

<head> 
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script src="contextMenu.js"></script>
</head>

<body>
<script>
//For example we are defining menu in object. You can also define it on Ul list. See on documentation.
var menu = [{
        name: 'create',
        img: 'images/create.png',
        title: 'create button',
        fun: function () {
            alert('i am add button')
        }
    }, {
        name: 'update',
        img: 'images/update.png',
        title: 'update button',
        fun: function () {
            alert('i am update button')
        }
    }, {
        name: 'delete',
        img: 'images/delete.png',
        title: 'delete button',
        fun: function () {
            alert('i am delete button')
        }
    }];

//Calling context menu
 $('.testButton').contextMenu(menu);
</script>

<div id="testButton1" class="testButton iw-mTrigger">Click me</div>
</body>

Alex · Accepted Answer · 2015-09-04 22:20:33Z

1

In addition to moving your code after "Click me" div you need add jQuery library before contextmenu.js. For example:

<head> 
<link rel="stylesheet" type="text/css" href="contextMenu.css" />

<script type="text/javascript" 
src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>

<script src="contextMenu.js"></script>
</head>

Also your code has links to the images (like img: 'images/update.png'), but I don't think you have them, so they will be shown as broken links.

answered Sep 4, 2015 at 22:20

Alex

111 bronze badge

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

Comments

charlietfl · Accepted Answer · 2015-08-04 20:35:31Z

0

You are calling the code before the element exists. If the element doesn't exist when the code is run it will simply fail quietly

Either move your script tag to bottom of <body> so the html it references precedes it or wrap the code as follows:

$(function(){
    $('.testButton').contextMenu(menu);
});

See: ready() docs

answered Aug 4, 2015 at 20:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

ferguson4848 Over a year ago

Okay, I think that makes sense, but if I move the everything in the <script> tag just above </body> it still does not run. If I wrap the $('.testButton').contextMenu(menu); in a function where should that go?

charlietfl Over a year ago

should work if that html exists and there are no errors in the browser dev tools console (F12)

Collectives™ on Stack Overflow

How to Use contextMenu.js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related