CODEWITHSUNDEEP
jqueryasp.net
Garrett Pe
Garrett Pe

Reputation: 31

Beginners jQuery issue

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>

Upvotes: 1

Views: 56

Answers (2)

Keith Nordstrom
Keith Nordstrom

Reputation: 354

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:

  1. 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

  2. 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!'); }); })();

Upvotes: -1

T.J. Crowder
T.J. Crowder

Reputation: 1075567

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:

  1. 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.

  2. 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 () {
    // ...
});

  3. 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.

Upvotes: 5

Related Questions