Javascript can't get an input element inside of a gridview

Question

I an asp.net page that lets a site administrator select a user to be a 'systems chair'. To do this, I list the users in a gridview, and have a column of radio buttons to show who the current chair is, or to change the assigned chair. I'm using an html input (type=radio) for the buttons. When the page loads, if the 'system' has a 'chair' assigned to it, I need to check the related radiobutton. I'm trying to do this with javascript or jquery. The scripts I've tried are:

jquery try 1:

<script type="text/javascript">
   function initRadioButtons() {
      $("#user268").attr('checked', 'checked');
   }
</script>

jQuery try 2: function initRadioButtons() { $("#user268").prop('checked', true); }

javascript (rb is set to null):

<script type="text/javascript">
      function initRadioButtons() {
         var rb = document.getElementById(user268");
      }
</script>

Here is the gridview from my .aspx file:

<Custom:GridView ID="gvUsers" DataSourceID="dsUsers" CellPadding="3" AutoGenerateColumns="false"
     ArrowUpImageUrl="~/images/SortUpArrow.jpg" ArrowDownImageUrl="~/images/SortDownArrow.jpg"
     Width="100%" ShowWhenEmpty="true" EmptyDataText="No Users Returned" DataKeyNames="userID"
    AllowSorting="true" runat="server">
       <Columns>
          <asp:TemplateField HeaderText="AST Chair" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle"
           SortExpression="IsChair">
             <ItemTemplate>
                <input type="radio" id='user<%# Eval("userID") %>' name="isChair" value='<%# Eval("userID") %>' onclick="radioButtonClicked(this);" />
                </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField HeaderText="Username" DataField="userName" sortExpression="userName" ItemStyle-HorizontalAlign="Left" />
          <asp:BoundField HeaderText="First Name" DataField="FirstName" SortExpression="FirstName" ItemStyle-HorizontalAlign="Left" />
          <asp:BoundField HeaderText="Last Name" DataField="LastName" SortExpression="LastName" ItemStyle-HorizontalAlign="Left" />
    </Columns>
</Custom:GridView>

What am I doing wrong?

Answer 1

I'd suggest two things. First the JavaScript:

<script type="text/javascript">
   $(document).ready(function(){
       initRadioButtons();
   });

   function initRadioButtons() {
      $(".user268").attr('checked', 'checked'); // notice i changed to class for next one
   }
</script>

Then I would check the view source of the running page, is it showing this in the ID field?

id='user<%# Eval("userID") %>'

I think you have to do that line differently. It has to be runat="server" for data binding to work. Because you have runat="server" then you actually have to use a class because webforms will auto assign an ID. It also has to be the full attribute value contained in the <%# %> . So my guess is this line should be more like:

<input runat="server" type="radio" class='<%# string.Format("user{0}", Eval("userID")) %>' name="isChair" value='<%# Eval("userID") %>' onclick="radioButtonClicked(this);" />

Now we have got this far I think the next problem you will have is that you are using an <input> tag in a GridView so it wont be posted back as part of the binding. Normally you would use <asp:RadioButton> to do this.