I have a jQuery which is like this:

<script type="text/javascript">
   $(document).ready(function () {

       $("#txtAgentName").click(function (event) {

           alert("I am ready!");

       });

   });
</script>

What I am assuming that this should fire if I click on my textbox txtAgentName. But it is not happening.

This is my textbox markup:

 <asp:TextBox ID="txtAgentName" runat="server" onclick="Event();"></asp:TextBox>

However, when I am doing this on my Javascript:

function ShowTime() {
         alert('<%= DateTime.Now.ToString() %>');
       }

and calling this ShowTime from my TextBox OnClick event, then it is firing up. Dont know what I am doing wrong here :(

I have a jQuery which is like this:

<script type="text/javascript">
   $(document).ready(function () {

       $("#txtAgentName").click(function (event) {

           alert("I am ready!");

       });

   });
</script>

What I am assuming that this should fire if I click on my textbox txtAgentName. But it is not happening.

This is my textbox markup:

 <asp:TextBox ID="txtAgentName" runat="server" onclick="Event();"></asp:TextBox>

However, when I am doing this on my Javascript:

function ShowTime() {
         alert('<%= DateTime.Now.ToString() %>');
       }

and calling this ShowTime from my TextBox OnClick event, then it is firing up. Dont know what I am doing wrong here :(

• javascript
• jquery
• asp

Share Improve this question Follow edited Apr 20, 2011 at 20:38 MacMac 35.4k5555 gold badges153153 silver badges224224 bronze badges asked Apr 20, 2011 at 20:13 RG-3RG-3 6,1981919 gold badges7272 silver badges127127 bronze badges 1

• If you look at the source code, is the ID of the textbox actually txtAgentName or is there something added to it? – Peter Olson Commented Apr 20, 2011 at 20:16

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

1. In ASP.NET setting the ID doesn't mean the DOM element will represent the same ID
2. You have an onclick event handler, try removing that.

Instead I would add a class onto it and do something like

<asp:TextBox ID="txtAgentName" runat="server" CssClass="my-text-box"></asp:TextBox>

$(function() {
    $('.my-text-box').click(function() {
        alert('Clicked!');
    });
});

The ID property of a control in ASP.NET WebForms is what will get used when building the control tree. If you look at the actualy ID in the DOM it probably says something like MainContent_txtAgentName instead.

You might want also to take a look at setting the ClientIDMode http://beyondrelational./blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx

If you're using ASP.NET 4.0 you can use <asp:TextBox ID="txtAgentName" runat="server" ClientIDMode="Static" ></asp:TextBox> this will render verbatim what you have in the ID attribute as the actual ID on the DOM.

When that web control renders, it is given an auto generated id. Which means the jquery selector never finds it. In addition to what has already been mentioned, you can use

$("#<%= txtAgentName.ClientId %>").click(function (event) {

Or change the control to have the following attribute

ClientIDMode="Static"

which will tell it to render txtAgentName as the id.

It is because .Net is probably renaming your textbox. Look at your generated code in the browser at what the textbox is getting renamed to. It'll be a mess. If you are using ASP.NET4, you can add ClientIdMode="Static" to the control, and it will remain named as you desire. Otherwise, your best bet is to give the textbox a class, and use that as the selector.

One other thing you could do is use <%= txtAgentName.ClientId %> to get the Client id. But if your jQuery is not on that page, then that will not work.

Try this:

 <asp:TextBox CssClass="myAgent" ID="txtAgentName" runat="server"></asp:TextBox>


<script type="text/javascript">
$(document).ready(function () {

   $(".myAgent").click(function (event) {

       alert("I am ready!");

   });

});
</script>