Why isn't jQuery working with ASP.NET for me?

Question

This doesn't work and I don't understand why, I have tried that code on W3schools and that works, I think the problem might be the reference or something, I'm new to ASP.NET.

ASP Code(Master Page)

<script src="./Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#bt_insertar").click(function () {
            alert("Handler for .click() called.");
        });
    });
</script>

<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>

Index.aspx

<td class="style4">
    <asp:Button ID="bt_insertar" runat="server" Text="Insertar" Width="71px" 
    onclick="bt_insertar_Click" style="height: 26px" />
</td>

What is ClientIdMode set to? Have you inspected the html to ensure that you're actually getting the id generated that you think you're getting? — joelmdev
– joelmdev, Commented Jul 13, 2013 at 17:48
As an aside, I'd suggest you might want to try the free "Try jQuery" course from CodeSchool if you are new to jQuery and JavaScript as it gives an excellent introduction to the library which will help give you the confidence and skills to write jQuery code. codeschool.com/courses/try-jquery — pwdst
– pwdst, Commented Jul 14, 2013 at 17:55

T.J. Crowder · Accepted Answer · 2013-07-14 17:54:40Z

5

By default, the ID you give your runat="server" control isn't the id that ends up on the DOM element. You can get the ID that ASP.Net generates from ClientID property on the server-side control object. E.g., change:

$("#bt_insertar").click(...

to

$("#<%= bt_insertar.ClientID%>").click(...

...if that code is in a page ASP.Net parses (as opposed to an external JavaScript file).

As of ASP.Net 4, you can control this behavior via the ClientIDMode property. For instance, if you use the Static mode (control.ClientIDMode = CLientIDMode.Static;), then the ID is in fact passed through as-is. But the default value for ClientIDMode is Predictable, which modifies the ID you use.

edited Jul 14, 2013 at 17:54

answered Jul 13, 2013 at 17:16

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

pwdst Over a year ago

This property is only available in ASP.NET 4 and above for clarity. The purpose of the concatenated ID in ASP.NET is to prevent duplicate IDs when you are using template controls or repeating elements/user controls. Use static IDs with care within user controls or templates to avoid this duplication.

pwdst Over a year ago

I am indeed - ClientID has been available since ASP.NET 1 to clarify the clarification.

Raghubar · Accepted Answer · 2013-07-13 17:43:22Z

1

To Bind jquery function to Asp.net Server control you have to write code this way.

<script type="text/javascript">

  $(document).ready(function () {
      $('#<%= bt_insertar.ClientID %>').click(function () {
          alert("Handler for .click() called.");
      });


  });

answered Jul 13, 2013 at 17:43

Raghubar

2,7981 gold badge23 silver badges31 bronze badges

Comments

Anton Belev · Accepted Answer · 2013-07-13 18:32:00Z

0

Several points:

In your JQuery include statement the src should be src="../Scripts/jquery-1.4.1.js" instead of src="./Scripts/jquery-1.4.1.js"
You don't really need to bind click event in your document.ready event instead you can include OnClientClick="bt_insertar_Click();" in your asp:Button

and then you can define your function bt_insertar_Click()

    <script type="text/javascript">

    function bt_insertar_Click() {
       alert("Handler for .click() called.");
    }
    </script>

It is a better programming practice to use a separate .js file for you web page so you can move all the relevant js functions to this js file and then include it like you did with the jquery file.

answered Jul 13, 2013 at 18:32

Anton Belev

14k23 gold badges76 silver badges115 bronze badges

Collectives™ on Stack Overflow

Why isn't jQuery working with ASP.NET for me?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related