CODEWITHSUNDEEP
jqueryjquery-selectorselement
user1143801
user1143801

Reputation: 27

jQuery selector can't find my element by ID

I'm still pretty new to jQuery! Testing it out on my old website to test out it's function. I can't even get a simple jQuery script to run and it's terribly embarrasing. Please help guys!

For some reason, I can't get the jQuery selector to find element by id. Here's the code

 $(document).ready(function () {
        if (jQuery) {
            alert("jQuery working");
        } else {
            alert("jQuery not working");
        }

        $('#TextBox4').keyup(function () {
            alert("KEYUP FUNCTION WORKENGGG");
            var password = jQuery('#TextBox3').val();
            var cfmPassword = jQuery('#TextBox4').val();
            check_password_match(password, cfmPassword);
        });
    });

And this is my ASP html code.

<asp:TextBox ID="TextBox4" runat="server" BackColor="#181818" ForeColor="White" 
                        TextMode="Password" ToolTip="Password">Password</asp:TextBox>`

<asp:TextBox ID="TextBox3" runat="server" BackColor="#181818" ForeColor="White" 
                        TextMode="Password" ToolTip="Password" Height="22px">Password</asp:TextBox>`

Upvotes: 1

Views: 6386

Answers (3)

user673450
user673450

Reputation: 176

I find the simplest way to quickly check if jQuery is finding your element is to use something like:

$("#TextBox4").css("border","solid 1px red");

This way when your page loads your given element should be highlighted in red. Then you can proceed with your real code knowing the selector is working.

Assuming that your alerts above have popped up and you do have jQuery installed correctly, I'd suggest you inspect your actual source. That is, browse to the page in question and see what the actual html is rendered as.

Since you seem to be using asp tags, (some flavor of Microsoft .NET I assume?), realize that byt he time the page is rendered, the actual html tags in the output look very different from the lines you are coding. Have a look at view source and inspect what the textbox actually renders as. You'll probably find it's a <textarea> or <input> tag. See if the id has changed. I believe Microsoft has a way of appending ids or other variables to the ids you provide. You might find that the real code jQuery is using your selector against looks like:

<input type="text" id="TextBox4_123124" ....

or something like that. In which case, you'll have to see if the id is always changed int he same way, or else, you may have to use Microsoft's implementation of jQuery - if there is any.

To really try your jQuery selector, try writing an html text element from scratch in pure html and see if that works for you, then move on to decrypting Microsoft's auto-generated html.

Upvotes: 0

Turcogj
Turcogj

Reputation: 161

The ID of the HTML element will not match the ID of the ASP control. The reason for this is ASP.NET controls can be naming controls which act as a ID namespace allowing multiple controls to have the same ID but different ClientID. The end result is that the ClientID is what you should be searching for in JQuery. I.e. $('#<%# TextBox4.ClientID %>') will return the JQuery element you are trying to retrieve.

Upvotes: 1

Piotr Perak
Piotr Perak

Reputation: 11088

Try this: $('#<%=TextBox4.ClientID %>')

On client side asp.net controls have id different than what you give it in aspx page.

Upvotes: 3

Related Questions