locked
AjaxWatermarkExtender Is Not Working. How to deal with it? RRS feed

  • Question

  • User-786564416 posted

    I have a LogonScreen.aspx form with two textboxs: UserName and UPassWord.

    I used the Ajax TextBoxWatermarkExtender control but it is not working. The form Source view is as following:

    <%@ Page Title="Login Screen" Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="LogonScreen.aspx.vb" Inherits="Logon_LogonScreen" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <style type="text/css">
            .TbStyle
            {
                width: 100%;   
            }
                    
             .ValidationErrorMessage
            {
                color:#F40000;
                text-align: right;
                font-family: "Sakkal Majalla";
                font-style: normal;
                font-size: 22px;
            }
            
            /*.ValidationStyle
            {
                color: red;
                text-align:center; 
                font-style: normal;
                font-size: 24px;
                margin-right:30px; 
                
            }*/
    
            .ValidationStyleA
            {
                color: red;
                text-align:left; 
                font-style: normal;
                font-size: 24px;
                margin-left:20px;
            }
    
            .ValidationStyleB
            {
                color: red;
                font-style: normal;
                font-size: 24px;
                margin-left:20px; 
            }
    
            
            /*.UNamePwdErrorMessage
            {
                color: #F40000;
                text-align: right;
                margin-top: 5px;
                font-family: "Sakkal Majalla";
                font-style: normal;
                font-size: 24px;
            }*/
            
    
           
             .PanelStyle
            {
                margin-top:30px; 
                Background-Color:#DFDFDF;
                Border-Color:Black; 
                Border-Style:Solid;
                Width:600px;
                background: rgb(219, 219, 219);
                
                opacity:0.8; 
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }
            
            .LoginTableStyle
            {
                width:100%;
                margin-top:40px;
            } 
            
            .LoginCommandStyle
            {
                width:30%;
                margin-top:20px;
            } 
    
            .NewUserTableStyle
            {
                width:100%;
                margin-top:5px;
            } 
            
            
            .ValidationErrorsStyle
            {
                width:95%;
                margin-top:15px;
            }  
            
            /*.UNPWDCompErrorsStyle
            {
                width:90%;
            }*/
            
            .auto-style1 {
                height: 36px;
            }
    
            #overlay 
                {
                    ;
                    z-index: 99;
                    top: 0px;
                    left: 0px;
                    background-color: #f8f8f8;
                    width: 100%;
                    height: 100%;
                    filter: Alpha(Opacity=90);
                    opacity: 0.9;
                    -moz-opacity: 0.9;
                }     
                   
            #theprogress 
                {
                    background-color: #fff;
                    border:1px none #ccc;
                    padding:10px;
                    width: 300px;
                    height: 30px;
                    line-height:30px;
                    text-align: center;
                    filter: Alpha(Opacity=100);
                    opacity: 1;
                    -moz-opacity: 1;
                }
    
            #modalprogress 
                {
                    ;
                    top: 40%;
                    left: 50%;
                    margin: -11px 0 0 -150px;
                    color: #990000;
                    font-weight:bold;
                    font-size:28px;
                    font-family:SC_AMEEN;  
                }
    
            .Buttonout
                {
                    cursor:default;
                } 
              
             .Buttonhover
                {
                    cursor:pointer;
                }
    
            
            .CellBG {
                border: 1px solid Black;
                background-color: #96C2F2;
                height: 27px;
                width:25%;
                text-align:right; 
            }
            
            .WaterMarkClass
            {
                font-size:24px;
                font-family:'Lucida Calligraphy';
                color:gray;    
            }
    
            
        </style>
    
        <script type="text/javascript">
    
            
            function runScript(e) {
                if (e.keyCode == 13) {
                    $("#Logining").click(); //jquery
                    document.getElementById("Logining").click(); //javascript
                }
            }
    
    
        </script>
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="WaterMark.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("[id*=UserName], [id*=UPassWord]").WaterMark();
            });
        </script>
    
    
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="CpMainContent" Runat="Server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                       
            <asp:Panel ID="Panel1" runat="server" CssClass="PanelStyle"  >
                <table id="LoginTable" runat="server" class="LoginTableStyle"   >
    
                    <tr>
                        <td style="width:17.5%">
                            <asp:CustomValidator ID="UnPwdCustomValidator" runat="server" 
                                CssClass="ValidationStyleA" Display="Dynamic" style="text-align: left;" 
                            ErrorMessage="إسم المستخدم لا يتطابق مع كلمة السر">*</asp:CustomValidator>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                ControlToValidate="UserName" CssClass="ValidationStyleB" Display="Dynamic" 
                                ErrorMessage="أدخل إسم المستخدم" style="text-align: left;">*</asp:RequiredFieldValidator>
                        
                        </td>
    
                        <td style="width:40%">
                            <asp:TextBox ID="UserName" runat="server"  
                            Height="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"    
                            style="border-color:black;border-width:2px;border-style:solid ; margin-top: 0px; font-family: 'Lucida Calligraphy'; font-size: 12pt;" 
                            Width="230px" TabIndex="1" onkeypress="return runScript(event)"></asp:TextBox>
                                   
                            <ajax:TextBoxWatermarkExtender ID="UserNameTBWM" runat="server" Enabled="True" TargetControlID="UserName" WatermarkText="إسم المستخدم" WatermarkCssClass="WaterMarkClass"  >
                            </ajax:TextBoxWatermarkExtender>
                
                        
                        </td>
    
                        <td class="CellBG" align="right" >
                            <asp:Button ID="UserNameLabel" runat="server" BackColor="#DBDBDB" BorderColor="Black" BorderStyle="None" BorderWidth="1px" ForeColor="Black" Height="35px" OnClientClick="return false" style="text-align: right; font-size: 30px; font-family: SC_AMEEN; background-color:#96C2F2" Text="اسم المستخدم" Width="120px" />
                        </td>
    
                        <td style="width:17.5%">
                        
                        </td>
                    </tr>
    
                    <tr>
                        <td style="width:17.5%">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                            ControlToValidate="UPassWord" Display="Dynamic" 
                            ErrorMessage="أدخل كلمة المرور" CssClass="ValidationStyleA">*</asp:RequiredFieldValidator>
                        </td>
    
                        <td style="width:40%">
                            <asp:TextBox ID="UPassWord" runat="server" BorderColor="Black" 
                            BorderStyle="Solid" Height="35px" BorderWidth="2px"  
                            style="margin-top: 0px; font-size: 12pt; font-family: 'Lucida Calligraphy';" Width="230px" 
                            TextMode="Password"  ToolTip="Enter Password" TabIndex="2" onkeypress="return runScript(event)"></asp:TextBox>
                            <ajax:TextBoxWatermarkExtender ID="UPassWordTBWM" runat="server" Enabled="True" TargetControlID="UPassWord" WatermarkText="كلمة المرور" WatermarkCssClass="WaterMarkClass"  >
                            </ajax:TextBoxWatermarkExtender>
                        </td>
    
                        <td class="CellBG" align="right">
                            <asp:Button ID="UserPasswordLabel" runat="server" BackColor="#DBDBDB" BorderColor="Black" BorderStyle="None" BorderWidth="1px" ForeColor="Black" Height="35px" OnClientClick="return false" style="text-align: right; font-size: 30px; font-family: SC_AMEEN; background-color:#96C2F2" Text="كلمة المرور" Width="100px" />
                        </td>
    
                        <td style="width:17.5%">
                        
                        </td>
                    </tr>
                    
                
                </table>
    
                <table id="LoginCommandTable" runat="server" class="LoginCommandStyle"  >
                    <tr>
                        <td>
                            <asp:Button ID="Logining" runat="server" BackColor="#42C1FF" 
                            BorderStyle="Solid" Height="35px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" 
                            style="font-size: x-large; font-family: 'Sakkal Majalla'; font-weight: 700;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" 
                            Text="دخـــول" Width="180px" BorderWidth="2px" BorderColor="Black" TabIndex="3" 
                            />
                        </td>
                    </tr>
                </table> 
    
                <table id="NewUser" runat="server" class="NewUserTableStyle"  >
                    <tr>
                        <td align="left" class="auto-style1"   >
                            <asp:LinkButton ID="LinkButton1" runat="server" style="font-family: 'sakkal Majalla'; margin-left:20px; font-size: 24px" ValidationGroup="NewLinkVG">مستخدم جديد؟</asp:LinkButton>
                        </td>
    
                    </tr>
    
                </table>
                
                <table id="ValidationErrorsTable" runat="server" class="ValidationErrorsStyle"  >
                    <tr>
                        <td>
                            <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                            CssClass="ValidationErrorMessage" DisplayMode="List" 
                                Height="108px" />
                        </td>
                    </tr>
                </table> 
    
               
            </asp:Panel>
            
            </ContentTemplate>     
        </asp:UpdatePanel>
    
        <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
            <ProgressTemplate>
                <div id="overlay">
                    <div id="modalprogress">
                        <div id="theprogress">
                            <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/WaitingImage.gif" Height="100px" Width="100px" />
                            <br />
                            الرجاء الانتظار
                        </div>
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>  
    
    </asp:Content>
    
    

    Friday, October 28, 2016 7:57 PM

All replies

  • User-183374066 posted

    Hi Ali,

    You can implement following article as it fulfill your need.

    http://www.aspsnippets.com/Articles/Display-WaterMark-text-for-Password-TextBox-in-ASPNet.aspx

    I am not a big fan of ajaxtoolkit. I would recommend you to use placeholder which is easy to use and you can apply styling on it as well. If you don't want to use place holder than better use any jquery watermark plugin.

    Regards, 

    Friday, October 28, 2016 9:17 PM
  • User-183374066 posted

    Ali I just make a sample for you so without watermarkextender which did the same trick. 

    • You can set watermark text of the textboxes as default text 
    • Set initial value of the required field validator
    • Set blur and focus function of textboxes
    • Just a small trick for password field that you can set type once it get focus

    Try following code

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebForm.Login" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    
        <style type="text/css">
            .TbStyle
            {
                width: 100%;   
            }
                    
             .ValidationErrorMessage
            {
                color:#F40000;
                text-align: right;
                font-family: "Sakkal Majalla";
                font-style: normal;
                font-size: 22px;
            }
            
            /*.ValidationStyle
            {
                color: red;
                text-align:center; 
                font-style: normal;
                font-size: 24px;
                margin-right:30px; 
                
            }*/
    
            .ValidationStyleA
            {
                color: red;
                text-align:left; 
                font-style: normal;
                font-size: 24px;
                margin-left:20px;
            }
    
            .ValidationStyleB
            {
                color: red;
                font-style: normal;
                font-size: 24px;
                margin-left:20px; 
            }
    
            
            /*.UNamePwdErrorMessage
            {
                color: #F40000;
                text-align: right;
                margin-top: 5px;
                font-family: "Sakkal Majalla";
                font-style: normal;
                font-size: 24px;
            }*/
            
    
           
             .PanelStyle
            {
                margin-top:30px; 
                Background-Color:#DFDFDF;
                Border-Color:Black; 
                Border-Style:Solid;
                Width:600px;
                background: rgb(219, 219, 219);
                
                opacity:0.8; 
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }
            
            .LoginTableStyle
            {
                width:100%;
                margin-top:40px;
            } 
            
            .LoginCommandStyle
            {
                width:30%;
                margin-top:20px;
            } 
    
            .NewUserTableStyle
            {
                width:100%;
                margin-top:5px;
            } 
            
            
            .ValidationErrorsStyle
            {
                width:95%;
                margin-top:15px;
            }  
            
            /*.UNPWDCompErrorsStyle
            {
                width:90%;
            }*/
            
            .auto-style1 {
                height: 36px;
            }
    
            #overlay 
                {
                    ;
                    z-index: 99;
                    top: 0px;
                    left: 0px;
                    background-color: #f8f8f8;
                    width: 100%;
                    height: 100%;
                    filter: Alpha(Opacity=90);
                    opacity: 0.9;
                    -moz-opacity: 0.9;
                }     
                   
            #theprogress 
                {
                    background-color: #fff;
                    border:1px none #ccc;
                    padding:10px;
                    width: 300px;
                    height: 30px;
                    line-height:30px;
                    text-align: center;
                    filter: Alpha(Opacity=100);
                    opacity: 1;
                    -moz-opacity: 1;
                }
    
            #modalprogress 
                {
                    ;
                    top: 40%;
                    left: 50%;
                    margin: -11px 0 0 -150px;
                    color: #990000;
                    font-weight:bold;
                    font-size:28px;
                    font-family:SC_AMEEN;  
                }
    
            .Buttonout
                {
                    cursor:default;
                } 
              
             .Buttonhover
                {
                    cursor:pointer;
                }
    
            
            .CellBG {
                border: 1px solid Black;
                background-color: #96C2F2;
                height: 27px;
                width:25%;
                text-align:right; 
            }
            
            .WaterMarkClass
            {
                font-size:24px;
                font-family:'Lucida Calligraphy';
                color:gray;    
            }
    
            
        </style>
    
        <script type="text/javascript">
    
            
            function runScript(e) {
                if (e.keyCode == 13) {
                    $("#Logining").click(); //jquery
                    document.getElementById("Logining").click(); //javascript
                }
            }
    
    
        </script>
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <%--<script src="WaterMark.min.js" type="text/javascript"></script>--%>
        <script type="text/javascript">
            //$(function () {
            //    $("[id*=UserName], [id*=UPassWord]").WaterMark();
            //});
    
    
            function WaterMark(txtName, event, defaultText) {
                 if (txtName.value.length == 0 & event.type == "blur") {
    
                    txtName.style.color = "Gray";
                    txtName.value = defaultText;
                    txtName.setAttribute("type", "input");
                }
    
                if (txtName.value == defaultText & event.type == "focus") {
                    txtName.style.color = "black";
                    txtName.value = "";
                }
            }
    
            function myFunction(txtName, event) {
                txtName.setAttribute("type", "Password");
            }
        </script>
    
        <%-- <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>--%>
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                       
            <asp:Panel ID="Panel1" runat="server" CssClass="PanelStyle"  >
                <table id="LoginTable" runat="server" class="LoginTableStyle"   >
    
                    <tr>
                        <td style="width:17.5%">
                            <asp:CustomValidator ID="UnPwdCustomValidator" runat="server" 
                                CssClass="ValidationStyleA" Display="Dynamic" style="text-align: left;" 
                            ErrorMessage="إسم المستخدم لا يتطابق مع كلمة السر">*</asp:CustomValidator>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                ControlToValidate="UserName" CssClass="ValidationStyleB" Display="Dynamic" 
                                ErrorMessage="أدخل إسم المستخدم" style="text-align: left;" InitialValue="إسم المستخدم">*</asp:RequiredFieldValidator>
                        
                        </td>
    
                        <td style="width:40%">
                            <asp:TextBox ID="UserName" runat="server"  text="إسم المستخدم"
                            Height="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"    
                            style="border-color:black;border-width:2px;border-style:solid ; margin-top: 0px; font-family: 'Lucida Calligraphy'; font-size: 12pt;" 
                            Width="230px" TabIndex="1" onblur="WaterMark(this, event,'إسم المستخدم');" onfocus="WaterMark(this, event,'إسم المستخدم');" onkeypress="return runScript(event)"></asp:TextBox>
                                   
                        </td>
    
                        <td class="CellBG" align="right" >
                            <asp:Button ID="UserNameLabel" runat="server" BackColor="#DBDBDB" BorderColor="Black" BorderStyle="None" BorderWidth="1px" ForeColor="Black" Height="35px" OnClientClick="return false" style="text-align: right; font-size: 30px; font-family: SC_AMEEN; background-color:#96C2F2" Text="اسم المستخدم" Width="120px" />
                        </td>
    
                        <td style="width:17.5%">
                        
                        </td>
                    </tr>
    
                    <tr>
                        <td style="width:17.5%">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                            ControlToValidate="UPassWord" Display="Dynamic" 
                            ErrorMessage="أدخل كلمة المرور" CssClass="ValidationStyleA" InitialValue="كلمة المرور">*</asp:RequiredFieldValidator>
                        </td>
    
                        <td style="width:40%">
                            <asp:TextBox ID="UPassWord" runat="server" BorderColor="Black" 
                            BorderStyle="Solid" Height="35px" BorderWidth="2px"  
                            style="margin-top: 0px; font-size: 12pt; font-family: 'Lucida Calligraphy';" Width="230px" Text="كلمة المرور" autocomplete="off"
                            ToolTip="Enter Password" TabIndex="2" onblur="WaterMark(this, event,'كلمة المرور');" onfocus="WaterMark(this, event,'كلمة المرور');" onkeypress="myFunction(this, event)"></asp:TextBox>
                        </td>
    
                        <td class="CellBG" align="right">
                            <asp:Button ID="UserPasswordLabel" runat="server" BackColor="#DBDBDB" BorderColor="Black" BorderStyle="None" BorderWidth="1px" ForeColor="Black" Height="35px" OnClientClick="return false" style="text-align: right; font-size: 30px; font-family: SC_AMEEN; background-color:#96C2F2" Text="كلمة المرور" Width="100px" />
                        </td>
    
                        <td style="width:17.5%">
                        
                        </td>
                    </tr>
                    
                
                </table>
    
                <table id="LoginCommandTable" runat="server" class="LoginCommandStyle"  >
                    <tr>
                        <td>
                            <asp:Button ID="Logining" runat="server" BackColor="#42C1FF" 
                            BorderStyle="Solid" Height="35px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" 
                            style="font-size: x-large; font-family: 'Sakkal Majalla'; font-weight: 700;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" 
                            Text="دخـــول" Width="180px" BorderWidth="2px" BorderColor="Black" TabIndex="3" 
                            />
                        </td>
                    </tr>
                </table> 
    
                <table id="NewUser" runat="server" class="NewUserTableStyle"  >
                    <tr>
                        <td align="left" class="auto-style1"   >
                            <asp:LinkButton ID="LinkButton1" runat="server" style="font-family: 'sakkal Majalla'; margin-left:20px; font-size: 24px" ValidationGroup="NewLinkVG">مستخدم جديد؟</asp:LinkButton>
                        </td>
    
                    </tr>
    
                </table>
                
                <table id="ValidationErrorsTable" runat="server" class="ValidationErrorsStyle"  >
                    <tr>
                        <td>
                            <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                            CssClass="ValidationErrorMessage" DisplayMode="List" 
                                Height="108px" />
                        </td>
                    </tr>
                </table> 
    
               
            </asp:Panel>
            
            </ContentTemplate>     
        </asp:UpdatePanel>
    
        <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
            <ProgressTemplate>
                <div id="overlay">
                    <div id="modalprogress">
                        <div id="theprogress">
                            <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/WaitingImage.gif" Height="100px" Width="100px" />
                            <br />
                            الرجاء الانتظار
                        </div>
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress> 
    
    
    
    
    </asp:Content>
    

    See demo

    Friday, October 28, 2016 9:29 PM
  • User-786564416 posted

    Dear Nasser,

    When I remove the ScriptManager, I got the error:

    The control with ID 'UpdatePanel1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

    Saturday, October 29, 2016 1:01 AM
  • User-183374066 posted

    You can keep this code with my code

     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    

    Actually I have that script manager in my master file that is why i didn't include on the content page.

    Your code would be roughly like following

    <%@ Page Title="Login Screen" Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="LogonScreen.aspx.vb" Inherits="Logon_LogonScreen" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <style type="text/css">
            .TbStyle
            {
                width: 100%;   
            }
                    
             .ValidationErrorMessage
            {
                color:#F40000;
                text-align: right;
                font-family: "Sakkal Majalla";
                font-style: normal;
                font-size: 22px;
            }
            
            /*.ValidationStyle
            {
                color: red;
                text-align:center; 
                font-style: normal;
                font-size: 24px;
                margin-right:30px; 
                
            }*/
    
            .ValidationStyleA
            {
                color: red;
                text-align:left; 
                font-style: normal;
                font-size: 24px;
                margin-left:20px;
            }
    
            .ValidationStyleB
            {
                color: red;
                font-style: normal;
                font-size: 24px;
                margin-left:20px; 
            }
    
            
            /*.UNamePwdErrorMessage
            {
                color: #F40000;
                text-align: right;
                margin-top: 5px;
                font-family: "Sakkal Majalla";
                font-style: normal;
                font-size: 24px;
            }*/
            
    
           
             .PanelStyle
            {
                margin-top:30px; 
                Background-Color:#DFDFDF;
                Border-Color:Black; 
                Border-Style:Solid;
                Width:600px;
                background: rgb(219, 219, 219);
                
                opacity:0.8; 
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }
            
            .LoginTableStyle
            {
                width:100%;
                margin-top:40px;
            } 
            
            .LoginCommandStyle
            {
                width:30%;
                margin-top:20px;
            } 
    
            .NewUserTableStyle
            {
                width:100%;
                margin-top:5px;
            } 
            
            
            .ValidationErrorsStyle
            {
                width:95%;
                margin-top:15px;
            }  
            
            /*.UNPWDCompErrorsStyle
            {
                width:90%;
            }*/
            
            .auto-style1 {
                height: 36px;
            }
    
            #overlay 
                {
                    ;
                    z-index: 99;
                    top: 0px;
                    left: 0px;
                    background-color: #f8f8f8;
                    width: 100%;
                    height: 100%;
                    filter: Alpha(Opacity=90);
                    opacity: 0.9;
                    -moz-opacity: 0.9;
                }     
                   
            #theprogress 
                {
                    background-color: #fff;
                    border:1px none #ccc;
                    padding:10px;
                    width: 300px;
                    height: 30px;
                    line-height:30px;
                    text-align: center;
                    filter: Alpha(Opacity=100);
                    opacity: 1;
                    -moz-opacity: 1;
                }
    
            #modalprogress 
                {
                    ;
                    top: 40%;
                    left: 50%;
                    margin: -11px 0 0 -150px;
                    color: #990000;
                    font-weight:bold;
                    font-size:28px;
                    font-family:SC_AMEEN;  
                }
    
            .Buttonout
                {
                    cursor:default;
                } 
              
             .Buttonhover
                {
                    cursor:pointer;
                }
    
            
            .CellBG {
                border: 1px solid Black;
                background-color: #96C2F2;
                height: 27px;
                width:25%;
                text-align:right; 
            }
            
            .WaterMarkClass
            {
                font-size:24px;
                font-family:'Lucida Calligraphy';
                color:gray;    
            }
    
            
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
    
            
            function runScript(e) {
                if (e.keyCode == 13) {
                    $("#Logining").click(); //jquery
                    document.getElementById("Logining").click(); //javascript
                }
            }
    	function WaterMark(txtName, event, defaultText) {
                 if (txtName.value.length == 0 & event.type == "blur") {
    
                    txtName.style.color = "Gray";
                    txtName.value = defaultText;
                    txtName.setAttribute("type", "input");
                }
    
                if (txtName.value == defaultText & event.type == "focus") {
                    txtName.style.color = "black";
                    txtName.value = "";
                }
            }
    
            function myFunction(txtName, event) {
                txtName.setAttribute("type", "Password");
            }
    
        </script>
    
    
    
      
    
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="CpMainContent" Runat="Server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                       
            <asp:Panel ID="Panel1" runat="server" CssClass="PanelStyle"  >
                <table id="LoginTable" runat="server" class="LoginTableStyle"   >
    
                    <tr>
                        <td style="width:17.5%">
                            <asp:CustomValidator ID="UnPwdCustomValidator" runat="server" 
                                CssClass="ValidationStyleA" Display="Dynamic" style="text-align: left;" 
                            ErrorMessage="إسم المستخدم لا يتطابق مع كلمة السر">*</asp:CustomValidator>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                                ControlToValidate="UserName" CssClass="ValidationStyleB" Display="Dynamic" 
                                ErrorMessage="أدخل إسم المستخدم" style="text-align: left;" InitialValue="إسم المستخدم">*</asp:RequiredFieldValidator>
                        
                        </td>
    
                        <td style="width:40%">
                            <asp:TextBox ID="UserName" runat="server"  text="إسم المستخدم"
                            Height="35px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"    
                            style="border-color:black;border-width:2px;border-style:solid ; margin-top: 0px; font-family: 'Lucida Calligraphy'; font-size: 12pt;" 
                            Width="230px" TabIndex="1" onblur="WaterMark(this, event,'إسم المستخدم');" onfocus="WaterMark(this, event,'إسم المستخدم');" onkeypress="return runScript(event)"></asp:TextBox>
                                   
                        </td>
    
                        <td class="CellBG" align="right" >
                            <asp:Button ID="UserNameLabel" runat="server" BackColor="#DBDBDB" BorderColor="Black" BorderStyle="None" BorderWidth="1px" ForeColor="Black" Height="35px" OnClientClick="return false" style="text-align: right; font-size: 30px; font-family: SC_AMEEN; background-color:#96C2F2" Text="اسم المستخدم" Width="120px" />
                        </td>
    
                        <td style="width:17.5%">
                        
                        </td>
                    </tr>
    
                    <tr>
                        <td style="width:17.5%">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                            ControlToValidate="UPassWord" Display="Dynamic" 
                            ErrorMessage="أدخل كلمة المرور" CssClass="ValidationStyleA" InitialValue="كلمة المرور">*</asp:RequiredFieldValidator>
                        </td>
    
                        <td style="width:40%">
                            <asp:TextBox ID="UPassWord" runat="server" BorderColor="Black" 
                            BorderStyle="Solid" Height="35px" BorderWidth="2px"  
                            style="margin-top: 0px; font-size: 12pt; font-family: 'Lucida Calligraphy';" Width="230px" Text="كلمة المرور" autocomplete="off"
                            ToolTip="Enter Password" TabIndex="2" onblur="WaterMark(this, event,'كلمة المرور');" onfocus="WaterMark(this, event,'كلمة المرور');" onkeypress="myFunction(this, event)"></asp:TextBox>
                        </td>
    
                        <td class="CellBG" align="right">
                            <asp:Button ID="UserPasswordLabel" runat="server" BackColor="#DBDBDB" BorderColor="Black" BorderStyle="None" BorderWidth="1px" ForeColor="Black" Height="35px" OnClientClick="return false" style="text-align: right; font-size: 30px; font-family: SC_AMEEN; background-color:#96C2F2" Text="كلمة المرور" Width="100px" />
                        </td>
    
                        <td style="width:17.5%">
                        
                        </td>
                    </tr>
                    
                
                </table>
    
                <table id="LoginCommandTable" runat="server" class="LoginCommandStyle"  >
                    <tr>
                        <td>
                            <asp:Button ID="Logining" runat="server" BackColor="#42C1FF" 
                            BorderStyle="Solid" Height="35px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" 
                            style="font-size: x-large; font-family: 'Sakkal Majalla'; font-weight: 700;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" 
                            Text="دخـــول" Width="180px" BorderWidth="2px" BorderColor="Black" TabIndex="3" 
                            />
                        </td>
                    </tr>
                </table> 
    
                <table id="NewUser" runat="server" class="NewUserTableStyle"  >
                    <tr>
                        <td align="left" class="auto-style1"   >
                            <asp:LinkButton ID="LinkButton1" runat="server" style="font-family: 'sakkal Majalla'; margin-left:20px; font-size: 24px" ValidationGroup="NewLinkVG">مستخدم جديد؟</asp:LinkButton>
                        </td>
    
                    </tr>
    
                </table>
                
                <table id="ValidationErrorsTable" runat="server" class="ValidationErrorsStyle"  >
                    <tr>
                        <td>
                            <asp:ValidationSummary ID="ValidationSummary1" runat="server" 
                            CssClass="ValidationErrorMessage" DisplayMode="List" 
                                Height="108px" />
                        </td>
                    </tr>
                </table> 
    
               
            </asp:Panel>
               
    
            
            </ContentTemplate>     
        </asp:UpdatePanel>
    
        <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
            <ProgressTemplate>
                <div id="overlay">
                    <div id="modalprogress">
                        <div id="theprogress">
                            <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/WaitingImage.gif" Height="100px" Width="100px" />
                            <br />
                            الرجاء الانتظار
                        </div>
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>  
    
    </asp:Content>

    Regards,

    Saturday, October 29, 2016 7:45 AM
  • User-271186128 posted

    Hi alihusain_77,

    Based on your code and description, I create a sample using the following code. It seems that everything works well on my side. I suggest you could refer to it:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
    
    
                <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajax:ToolkitScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <ajax:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TextBox1" WatermarkText="User Name" runat="server"></ajax:TextBoxWatermarkExtender>
                        <asp:TextBox ID="UPassWord" runat="server" BorderColor="Black"
                            BorderStyle="Solid" Height="35px" BorderWidth="2px"
                            Style="margin-top: 0px; font-size: 12pt; font-family: 'Lucida Calligraphy';" Width="230px"
                            TextMode="Password" ToolTip="Enter Password" TabIndex="2" onkeypress="return runScript(event)"></asp:TextBox>
                        <ajax:textboxwatermarkextender id="UPassWordTBWM" runat="server" enabled="True" targetcontrolid="UPassWord" watermarktext="كلمة المرور" watermarkcssclass="WaterMarkClass">
                            </ajax:textboxwatermarkextender>
                    </ContentTemplate>
                </asp:UpdatePanel>

    The output:

    Note, please check your code, you are using AjaxWatermarkExtender with the Password TextBox.

    Besides, from your code, it seems that you are also using "WaterMark.min.js" plugin, you could try to remove the JS reference and this part of code.

    If still not working, you could try to use F12 developer tools to debug your code and check whether there is some error.

    Best regards,
    Dillion

     

    Friday, November 4, 2016 9:36 AM