Cannot select grid element through jQuery

Question

This is a follow-up question to ASP.NET How to pass container value as javascript argument

Darin Dimitrov has kindly provided his answer using jQuery,
But for some reason, I was not able to select the grid row I wanted to.

Here is the jQuery used to select row.

$(function() {
    $('#_TrustGrid input[name^=trustDocIDTextBox]').each(function(index) {
        $(this).click(function() {
            alert('Hello world = ' + index);
            setGridInEditMode(index);
        });
    });
});

Here is the actual output HTML markup.

<input 
 id="_TrustGrid_ctl16_ctl05_ctl00_trustDocIDTextBox" 
 type="text" value="198327493" 
 name="_TrustGrid$ctl16$ctl05$ctl00$trustDocIDTextBox"/>

I have just started using jQuery tonight and been going through
the official jQuery Selectors documentation but have been unsuccessful.

Am I missing something here?

Answer 1

What I did to save the full id of the control I used in my .aspx page:

<input type="hidden" 
       id="SubcontractorDropDownID" 
       value="<%= SubcontractorDropDown.ClientID %>" />

You can then just get the value of the id and then use that in your query to know which row to use.

Answer 2

At first glance, I think you just want a '$' instead of '^' and you should be targeting the ID and not the NAME in your selector?

$(function() {
    $('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
        $(this).click(function() {
            alert('Hello world = ' + index);
            setGridInEditMode(index);
        });
    });
});

Answer 3

I do not know why selecting through #_TrustGrid would not work. I was able to get around the problem by specifying :input as shown below.

    $(function() {
        //$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
        $(':input[id$=trustDocIDTextBox]').each(function(index) {
            $(this).click(function() {
                alert('Hello world = ' + index);
                setGridInEditMode(index);
            });
        });
    });