Beginners jQuery issue

Question

I have some experience with JavaScript, but I am a complete noob when it comes to jQuery. Basically I'm trying to add a real simple click event handler to return the time. I'm not receiving any errors in the console but nothing happens when the button is clicked (I added the console.log purely for testing purposes). I imported the entire bootstrap package through nuget, so I believe I have the complete jQuery library. Is there something else I'm missing? Thanks in advance!

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="jQuery.aspx.cs" Inherits="garrettPenfieldUnit10.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <h1>jQuery Page</h1>
    <p><asp:Label ID="LabelJQ" runat="server" Text="Click the Button!"></asp:Label></P>
    <asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!"/>

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $('#ButtonJQ').click(function () {
            var d = new Date();
            document.getElementById(LabelJQ).innerHTML = d.toLocaleTimeString();
            console.log('wubba lubba dub dub!');
        });
    </script>
</asp:Content>

T.J. Crowder · Accepted Answer · 2017-04-14 13:20:15Z

5

If you inspect that button in the browser, I suspect you'll find that it doesn't have id="ButtonJQ", because the ID of a server control isn't (by default) its client-side ID.

You have at least three options:

Add ClientIDMode="Static" to it:

<asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!" ClientIDMode="Static"/>

That tells ASP.Net to use the server ID as the client ID.

Use something else (like a class) to look up the button:

<asp:Button ID="ButtonJQ" runat="server" Text="Update the Time!" class="update-time"/>

then in the JavaScript:

$('.update-time').click(function () {
    // ...
});

Since your JavaScript code is in the ASP file, you could use the ClientID property of your button:
```
$("#<% ButtonJQ.ClientID %>").click(function() {
    // ...
});
```

Note that you'll have the same issue with LabelJQ.

answered Apr 14, 2017 at 13:20

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

ibubi Over a year ago

I would add the UseSubmitBehavior="false" to the Button, in any case of only client side purposes of the click event.

T.J. Crowder Over a year ago

@ibubi: I don't know much about ASP.Net's Button. :-) If it renders as a <button>, then yes, if there's any chance it'll be inside a form it wants type="button" to avoid being a submit button. (Outside a form it doesn't matter.)

Garrett Pe Over a year ago

Thank you for the info! I changed my code to work off of classes rather than ID's, but unfortunately I'm still getting the same result.

Keith Nordstrom · Accepted Answer · 2017-04-14 13:34:32Z

First, you should check your network tab to make sure jQuery is being loaded.

But the second thing is that you are clearly working with Asp.Net and the controls in the page you are writing are not the final HTML ones. I would recommend accessing your elements using class names rather than IDs in any case because it's safer - particularly as you may load a page with many elements written by many developers, the odds of collision for ids are higher than they are for semantically written class names. Asp.Net gets around this by generating those IDs including the ids of parent elements in the ids of the elements, which is why you're not reaching the label.

Getting the element itself can be accomplished by using a CSS accessor in jQuery's $ object, as in

$(".date-display-element").html(date);

This will have the side benefit (or potential pitfall) of allowing you to add the date to any other element in your page simply by applying a class to it.

A couple other things:

You've added the script in your page below the tag being considered so you do not need to do anything on any sort of load event
I find it best to wrap all of my bare javascript in anonymous executed functions so that there is no chance it conflicts with anything in the page. In your case the code is relatively innocuous, but you never know when you might need to add something to it. That is,

(function(){ $('#ButtonJQ').click(function () { var d = new Date(); $(".date-display-element").html(d.toLocaleTimeString()); console.log('wubba lubba dub dub!'); }); })();

Collectives™ on Stack Overflow

Beginners jQuery issue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related