Right-Click-Menu-using-JQuery....

Question

0.00/5 (No votes)

See more:

SQL

I have a scenario where a user can select particular text and right click on a textbox, a context menu is
displayed and he can select a particular item from the list. Then, that text
will be appended to the appropriate textbox.

Ex:Context Menu have items like Name,Address,Number,Country..If i selected text as chennai and right click then selected Address in the menu list then the selected text(Ex:Chennai) display in the address textbox....

Here is My coding for context menu wil appear

Menu.aspx

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="RightClickMenu.Menu" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>    <script src="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.js"        type="text/javascript"></script>    <link href="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.css"        rel="stylesheet" type="text/css" />
  <%-- <link href="SampleScripts/Menu.css" rel="Stylesheet" type="text/css" />--%>
     <script type="text/javascript">
         $(document).ready(function () {

             $("input:text").focus(function () { $(this).select(); });

             $("#<%= txtEnterUrl.ClientID%>").contextMenu({
                 menu: 'myMenu'
             }, function (action, el, pos) {

             });
             $('#Name').click(clickHandler);
             $('#live').live('click', clickHandler);

             function clickHandler() {
                 alert("Clicked");
                 return false;
             }

         });




    </script>
</head>
<body>

    <ul id="myMenu" class="contextMenu">
    <li id="Name"><a href="#Name">Name</a></li>
    <li id="Number"><a href="#Number">Number</a></li>
    <li id="Address"><a href="#Address">Address</a></li>
    <li id="Country"><a href="#Country">Country</a></li>
</ul>

    <form id="form1" runat="server">
    <table style="width:100%; height:411px;">
    <tr>
       <td style="width:100%; height:20%">
 <asp:Panel ID="pnlHeader" runat="server" Height="59px">
    <asp:Label ID="lblEnterUrl" runat="server" Text="Enter Url" Font-Bold="true"
            style="z-index: 1; left: 271px; top: 66px; position: absolute" ></asp:Label>
    <asp:TextBox ID="txtEnterUrl" runat="server" Text="Chennai;

         style="z-index: 1; left: 405px; top: 59px; position: absolute; width: 505px; height: 32px"  ></asp:TextBox>
    </asp:Panel>
       </td>
    </tr>
    <tr>
       <td style="width:100%; height:80%">
       <asp:Label ID="lblName" runat="server" Text="Name"
    style="z-index: 1; left: 278px; top: 161px; position: absolute"></asp:Label>
<asp:TextBox ID="txtName" runat="server"
    style="z-index: 1; left: 376px; top: 159px; position: absolute" ></asp:TextBox>
<asp:TextBox ID="txtNumber" runat="server"
    style="z-index: 1; left: 375px; top: 256px; position: absolute"></asp:TextBox>
<asp:Label ID="lblAddress" runat="server" Text="Address"

    style="z-index: 1; left: 585px; top: 160px; position: absolute; height: 19px; width: 64px"></asp:Label>
<asp:TextBox ID="txtAddress" runat="server"
    style="z-index: 1; left: 707px; top: 158px; position: absolute" ></asp:TextBox>
<asp:Label ID="lblCountry" runat="server" Text="Country"
    style="z-index: 1; left: 584px; top: 259px; position: absolute"></asp:Label>
<asp:TextBox ID="txtCountry" runat="server"
    style="z-index: 1; left: 699px; top: 261px; position: absolute" ></asp:TextBox>
<asp:Label ID="lblNumber" runat="server" Text="Number"
    style="z-index: 1; left: 275px; top: 256px; position: absolute"></asp:Label>
</td>
    </tr>
    </table>

    </form>
</body>
</html>

Posted 2-Oct-12 19:42pm

__PP__

Updated 2-Oct-12 20:09pm

v3

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

__PP__ · Answer 1 · 2012-10-02T23:04:00

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="RightClickMenu.Menu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>    <script src="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.js"        type="text/javascript"></script>    <link href="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.css"        rel="stylesheet" type="text/css" />
   <%--<link href="SampleScripts/Menu.css" rel="Stylesheet" type="text/css" />--%>
     <script type="text/javascript">
         $(document).ready(function () {

             $("input:text").focus(function () { $(this).select(); });

             $("#<%= txtEnterUrl.ClientID%>").contextMenu({
                 menu: 'myMenu'
             }, function ShowSelection(action, el, pos) {
                 var textComponent = document.getElementById("<%= txtEnterUrl.ClientID%>");
                 var selectedText;

                 if (document.selection != undefined) {
                     textComponent.focus();
                     var sel = document.selection.createRange();
                     selectedText = sel.text;
                 }
                    else if (textComponent.selectionStart != undefined) {
                     var startPos = textComponent.selectionStart;
                     var endPos = textComponent.selectionEnd;
                     selectedText = textComponent.value.substring(startPos, endPos)
                 }



                 if (action === "Name") {
                     document.getElementById('<%= txtName.ClientID %>').value = selectedText;
                 } else if (action === "Number") {
                     document.getElementById('<%= txtNumber.ClientID %>').value = selectedText;
                 } else if (action === "Address") {
                     document.getElementById('<%= txtAddress.ClientID %>').value = selectedText;
                 }
                 else if (action === "Country") {
                     document.getElementById('<%= txtCountry.ClientID %>').value = selectedText;
                 }

             });
             $('#Name').click(clickHandler);
             $('#live').live('click', clickHandler);


         });




    </script>
</head>
<body>
    <ul id="myMenu" class="contextMenu">
    <li id="Name"><a href="#Name">Name</a></li>
    <li id="Number"><a href="#Number">Number</a></li>
    <li id="Address"><a href="#Address">Address</a></li>
    <li id="Country"><a href="#Country">Country</a></li>
</ul>

    <form id="form1" runat="server">
    <table style="width:100%; height:411px;">
    <tr>
       <td style="width:100%; height:20%">
 <asp:Panel ID="pnlHeader" runat="server" Height="59px">
    <asp:Label ID="lblEnterUrl" runat="server" Text="Enter Url" Font-Bold="true"
            style="z-index: 1; left: 271px; top: 66px; position: absolute" ></asp:Label>
    <asp:TextBox ID="txtEnterUrl" runat="server"

         style="z-index: 1; left: 405px; top: 59px; position: absolute; width: 505px; height: 32px"  ></asp:TextBox>
    </asp:Panel>
       </td>
    </tr>
    <tr>
       <td style="width:100%; height:80%">
       <asp:Label ID="lblName" runat="server" Text="Name"
    style="z-index: 1; left: 278px; top: 161px; position: absolute"></asp:Label>
<asp:TextBox ID="txtName" runat="server"
    style="z-index: 1; left: 376px; top: 159px; position: absolute" ></asp:TextBox>
<asp:TextBox ID="txtNumber" runat="server"
    style="z-index: 1; left: 375px; top: 256px; position: absolute"></asp:TextBox>
<asp:Label ID="lblAddress" runat="server" Text="Address"

    style="z-index: 1; left: 585px; top: 160px; position: absolute; height: 19px; width: 64px"></asp:Label>
<asp:TextBox ID="txtAddress" runat="server"
    style="z-index: 1; left: 707px; top: 158px; position: absolute" ></asp:TextBox>
<asp:Label ID="lblCountry" runat="server" Text="Country"
    style="z-index: 1; left: 584px; top: 259px; position: absolute"></asp:Label>
<asp:TextBox ID="txtCountry" runat="server"
    style="z-index: 1; left: 699px; top: 261px; position: absolute" ></asp:TextBox>
<asp:Label ID="lblNumber" runat="server" Text="Number"
    style="z-index: 1; left: 275px; top: 256px; position: absolute"></asp:Label>
</td>
    </tr>
    </table>

    </form>
</body>
</html>

_Amy · Answer 2 · 2012-10-02T19:52:00

Solution 1

If talking of context menu then refer the links below for similar articles:
MSDN: Adding a Context Menu to ASP.NET Controls[^]
Right Click Menu using JQuery ASP.NET using C#[^]
Integrating jQuery Context Menu Plugin with Bing Maps AJAX Control V7[^]

--Amit

Posted 2-Oct-12 19:52pm

_Amy