jQuery watermark plugin not working when postback from within an UpdatePanel

Issue: I had a textbox with jquery watermark applied inside of an asp.net UpdatePanel. When I postback without entering anything in the textbox and grab the Text1.Text in the postback, the value showed the watermark text. Ideally it should be empty text as I did not enter anything in the textbox.

Plugin: http://jquery-watermark.googlecode.com/

Problem

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                 <asp:LinkButton ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                <asp:Label ID="lblMessage" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>

I am using Watermark plugin for jQuery( Version: 3.0.5)   

For some reason that’s the code inside our source control with some other customization.

The newer Version: 3.1.1 has this code:

$(window).bind("beforeunload", function () { 
        if ($.watermark.options.hideBeforeUnload) { 
            $.watermark.hideAll(); 
        } 
    });

3.0.5 was missing that.

Workaround

So work-around is to do $.watermark.hideAll() explicitly in the postback button Click handler or onbeforeunload when the page loads first time and when the UpdatePanel requestEnd event. Too late to call .hideAll in intializeRequest.

$('#<%=Button1.ClientID%>').click(function () { 
                if (typeof("Page_ClientValidate") === "function") {
                    if (Page_ClientValidate()) {
                        $.watermark.hideAll(); 
                      }
                    else {
                        $.watermark.showAll();
                      }
                }
                else {
                    $.watermark.hideAll();
                }
 });

OR

window.onbeforeunload = beforeUnloading; 
var prm = Sys.WebForms.PageRequestManager.getInstance();
 prm.add_endRequest(endRequest); 

function beforeUnloading() { 
$.watermark.hideAll(); 
} 

function endRequest(sender, args) {
window.onbeforeunload = beforeUnloading;
 $('#<%=TextBox1.ClientID%>').watermark("Enter a date");
 }

Very rough post….Sorry about that but comment here if you have any specific question about this issue.

No Comments