Get the Client ID of an ASP.NET Control in jQuery

While navigating the DOM using jQuery, it is often necessary to get the id of the control and perform operations on it, like hiding the control.

However, if you are using an ASP.NET Master Page and would like to retrieve the ClientId of a control using jQuery, then here's how to do so:


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<title></title>


<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>


<script type="text/javascript">


    $(document).ready(function() {


        $("#<%=RadioButtonList1.ClientID %>").hide('slow');


    });    


</script>


</head>


<body>


<form id="form1" runat="server">


<div>   


<asp:RadioButtonList ID="RadioButtonList1"  runat="server">


<asp:ListItem Value="Ten"></asp:ListItem>


<asp:ListItem Value="Twenty"></asp:ListItem>


<asp:ListItem Value="Thirty"></asp:ListItem>


<asp:ListItem Value="Forty"></asp:ListItem>


</asp:RadioButtonList>




The example shown above fetches the ClientId of the RadioButtonList and hides it using jQuery

3 comments:

  1. jQuery beginnerJanuary 4, 2011 at 3:47 AM

    I'm trying to use the above to hide control, but get bellow error message:

    $("#<%=dropDownNotification.ClientID %>").hide();
    TypeError: Cannot set property 'display' of undefined

    my control look like this:

    <asp:DropDownList ID="dropDownNotification" runat="server">
    <asp:ListItem Value="0" Text="Begge" Selected="True" />
    <asp:ListItem Value="1" Text="SMS" />
    <asp:ListItem Value="2" Text="E-mail" />
    </asp:DropDownList>

    The only way I seem to get hold of the control is to get it's full name from the source code:

    $("#ctl00_ContentPlaceHolder1_dropDownNotification").hide();

    Just don't think it is as pretty. Anyone who can help?!

    ReplyDelete
  2. Suprotim AgarwalJanuary 4, 2011 at 5:10 AM

    Are you getting this error in all browsers or just in Chrome?

    ReplyDelete
  3. jQuery beginnerJanuary 6, 2011 at 7:10 AM

    you're right... at least it works in explorer. Thanks!

    ReplyDelete