jQuery and UserControl Property access

Question

How can I access a asp:userControl's property using jQuery

$("#<% =ucControl1.ClientID%>").find("[id$='Panel1']").hide();

I am trying to show an asp:Panel with the usercontrol and it doesnt work.

<div id="ctl00_ContentPlaceHolder1_ctl02_ucControl1_Panel1">

 content....

</div>

The jQuery rendered is as follows:

 $("#ctl00_ContentPlaceHolder1_ctl02_ucControl1").find("[id$='Panel1']").show(); 

Answer 1

If you don't manually include the ClientID as an ID in your user control's rendered markup, it won't be rendered (i.e. ASP.NET does not render a wrapping element around the user control with the ClientID). Your ID selector probably isn't finding anything.

Answer 2

If you have set Visible="false" on the user control, then you can't show it with client-side code, because it is simply not rendered by the server-side (it is not part of the resulting HTML page).

What you can do instead, is to leave Visible="true" on the user control and put it into a hidden wrapper DIV which can then be shown client-side:

<div style="display:none" id="uc1Wrapper">
 <uc1:usercontrol Visible="true" runat="server">...
</div>

...

$("#uc1Wrapper").show();