I am wanting to make a "right click context menu" which performs a search for each right-clicked word in a document. I am using the plugin contextmenu.js. This plugin works great but needs to be modified it to better suit my needs.
I want to pass a "word_id" from each word (lines 39 and 40) into the contextmenu (line 17) which in turn passes the same data into the lookup routine (like 31 which is now just an alert box). What I have right now is that the context menu has 6 items. I am testing my desired outcome with the first item of the six. What I would expect to happen is that when I click the word "Apple" on line 39 the word_id "foo" would be passed to the alert box which is fired upon clicking the first of the six items
in the context menu. It works!
But I would also expect that when I right click the word "Jacks" on line 40 I would get the word "bar" -- I don't -- instead I get the word "foo" again.
Can someone help me?
Here is my code:
01-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02-- <html xmlns="http://www.w3.org/1999/xhtml" >
03-- <head>
04-- <title></title>
05-- <meta charset="UTF-8" />
06-- <link href="css/contextmenu.css" rel="stylesheet" type="text/css" />
07-- <script src="src/jquery.js" type="text/javascript"></script>
08-- <script src="src/Plugins/jquery.contextmenu.js" type="text/javascript"></script>
09--
10--
11-- <script type="text/javascript">
12--
$(document).ready(function() {
13-- $("[class=target]").each(function(){
14--
$(this).contextmenu({
15--
16--
width: 150, items: [
17--
{ text: "Inflected - Book", icon: "sample-css/wi0054-16.gif", alias: $(this).attr("word_id"), action: menuAction },
18--
{ text: "Inflected - Author", icon: "sample-css/wi0054-16.gif", alias: "1-2-4010110101", action: menuAction },
19--
20--
{ text: "Inflected - NT", icon: "sample-css/wi0054-16.gif", alias: "1-3-4010110101", action: menuAction },
21--
{ type: "splitLine" },
22--
{ text: "Lemma - Book", icon: "sample-css/wi0054-16.gif", alias: "2-1-4010110101", action: menuAction },
23--
{ text: "Lemma - Author", icon: "sample-css/wi0054-16.gif", alias: "2-2-4010110101", action: menuAction },
24--
{ text: "Lemma - NT", icon: "sample-css/wi0054-16.gif", alias: "2-3-4010110101", action: menuAction }
25-- ]
26--
});
27--
});
28--
29--
30--
function menuAction() {
31-- alert(this.data.alias);
32-- };
33--
});
34-- </script>
35--</head>
36--<body>
37-- <div style="padding:10px;">
38-- <h1>Right click a word to get a context for searching</h1>
39-- <span class="target" word_id="foo">Apple</span>
40-- <span class="target" word_id="bar">Jacks</span>
41--
42-- </div>
43--</body>
44--</html>