Using jQuery Click with ASP.Net Update Panel

This is how you would normally add an onClick event to an asp:TextBox:
<asp:TextBox  ID="txtStoreLocatorZip" runat="server"
     ValidationGroup="CustomerServiceEmail" Text="Enter Zip"
     CssClass="txtStoreLocatorZip_CssClass" />
<script>
        if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
            $('.txtStoreLocatorZip_CssClass').click(function () {
                if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
                    $('.txtStoreLocatorZip_CssClass').val('');
                }
            });
        }
</script>

But, once you add the TextBox control inside of the UpdatePanel the javascript is not read on postback so the script will not be reinitialized when the UpdatePanel reloads.

Here is the UpdatePanel code that will register the script when the UpdatePanel is reloaded:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TextBox  ID="txtStoreLocatorZip"
            ValidationGroup="CustomerServiceEmail" runat="server"
            Text="Enter Zip" CssClass="txtStoreLocatorZip_CssClass" />
    </ContentTemplate>
</asp:UpdatePanel>
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
function endRequestHandler(sender, args) {
    if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
        $('.txtStoreLocatorZip_CssClass').click(function () {
            if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
                $('.txtStoreLocatorZip_CssClass').val('');
            }
        });
    }
}
</script>

-DAF

Add Feedback