How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?

Question

I have a simple .aspx page and a textbox which I want to maske It using jquery.maskedinput-1.3.js and my page .aspx code is as follows , the issue is on first page load I the textbox is masked , but after an asyncPostback the masked input plugin is not working ! how can I make the masked input plugin working ? thx in advance .

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script type='text/javascript'>
        jQuery(function ($) {
            $("#txtMembershipCode").mask("999-9999-999-9999");
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager> 
    <div style="float: right" id="exDiv">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: right; width: 120px; font-family: Tahoma">
                            membership Code :</div>
                        <div style="float: left">
                            <asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" ClientIDMode="Static"
                                dir="ltr"></asp:TextBox>
                        </div>
                        <div style="font-family: Tahoma; float: left">
                            <asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
                        <div style="font-family: Tahoma; float: right">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <ProgressTemplate>
                                    <img src="Images/484.gif" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

I have tried many different ways on the web but none of them are working !

possible duplicate of [jQuery $(document).ready and UpdatePanels?](http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels) — Yuriy Rozhovetskiy, Sep 20 '13 at 11:54

Ross · Accepted Answer · 2013-09-22T23:02:52.303

Here is one way of solving this -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
    <script type='text/javascript'>
        window.onload = function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }

        function endRequestHandler(sender, args) {
            init();
        }

        function init() {
            $("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
        }

        $(function() { // DOM ready
            init();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager> 
    <div style="float: right" id="exDiv">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: right; width: 120px; font-family: Tahoma">
                            membership Code :</div>
                        <div style="float: left">
                            <asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" dir="ltr"></asp:TextBox>
                        </div>
                        <div style="font-family: Tahoma; float: left">
                            <asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
                        <div style="font-family: Tahoma; float: right">
                            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                                <ProgressTemplate>
                                    <img src="Images/484.gif" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

This approach uses the Sys.WebForms.PageRequestManager JavaScript class and is possible because you have a Script Manager on your .aspx page. Basically after every async postback the init() function will be called.

Notice the init() function is also called in DOM ready. This allows you to do everything to the DOM you need done again after content has changed during the async postback. I have used this technique before using various jQuery plugins including this one.

Hi , thx for your answear , I tried exactly your code but at this line of code : $("#txtMembershipCode").mask("999-9999-999-9999"); I get this error message in runtime : Microsoft JScript runtime error: Object doesn't support property or method 'mask' — gwt, Sep 22 '13 at 19:01
@Karamafrooz I edited my answer, please try it now. I think the issue might have something to do with the `ClientIDMode` set to `Static` on the `txtMembershipCode` TextBox. I removed this and changed the selector so it will work. — Ross, Sep 22 '13 at 23:06

score 0 · Answer 2 · answered May 06 '20 at 09:52

0

I used function pageLoad

<script type='text/javascript'>

        function pageLoad() {
            $("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
        }

</script>

answered May 06 '20 at 09:52

Yosep Tito

737
6
7

How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?

2 Answers2

Linked