jquery not working with update panel

Question

I have the following markup;

 <fieldset style="width:40%;">
    <legend> Site User Role Management</legend>
    <asp:Label ID="lblSiteUserDDl" runat="server" AssociatedControlID="ddlSiteUsers"
         Text="Manage the roles in which a user is registered by selecting the user from the dropdown list below."></asp:Label>
    <asp:DropDownList ID="ddlSiteUsers" runat="server" CssClass="dropdowns" AutoPostBack="True" />
    <br /><br />
    <fieldset id="rolemanagement" style="width:80%;" runat="server" >
        <legend></legend>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                    <asp:Label ID="lblCurrentRole" runat="server"  CssClass="literaltext"></asp:Label><br />
                    <asp:Label ID="lblSiteUserRole" runat="server" CssClass="literaltext"></asp:Label><br />
                    <asp:DropDownList ID="ddlUserRoles" CssClass="dropdowns" runat="server"/><br />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ddlSiteUsers" EventName="SelectedIndexChanged"/>
            </Triggers>
        </asp:UpdatePanel>
   </fieldset>
</fieldset>

and the following script at the bottom of the page

 <script>
    $(document).ready(function() {
        $('#<%= ddlSiteUsers.ClientID%> ').change(function () {
            $(this).css({ 'color': 'black', 'font-size': '1.1em', 'font-weight': 'bold' });
            var selecteditem = $(this).children("option:selected").text();
            $('#<%= lblCurrentRole.ClientID%>').html("You selected the user: <span style='color:black;font-weight:bold;'>" + selecteditem + "</span>");
        });
    });
</script>

The problem is that the first label DOES change properly but is removed when the page is returned by the update panel. I have tried all the various solutions I've found via google but none seem to work. For now the fieldset with the two labels and the dropdown is always visible, ultimately once I get the labels to display properly that fieldset will be hidden until the upper dropdown selection changes.

Answer 1

Move the lblCurrentRole outside the update panel or populate it's value server side. Since the problem is that it is being replaced, you need to either keep it out of the container that is being replaced or set the value server side so that the returned HTML will have it set correctly.

Using a set of spans, server-side, to update the value of the label.

 lblCurrentRole.Controls.Clear();

 var textSpan = new HtmlGenericControl("span");
 textSpan.InnerText = "You selected the user: ";
 lblCurrentRole.Controls.Add(textSpan);

 var userSpan = new HtmlGenericControl("span");
 userSpan.InnerText = ddlSiteUsers.SelectedValue;
 userSpan.Attributes.Add("class","selected-user");
 lblCurrentRole.Controls.Add(userSpan);