Masked Input Plugin not working

Question

EDIT: I found the the answer which fixed my issue at this link How to make JQuery masked-input plugin working after AsyncPostback in asp.net Ajax Update pannel?

I am using this plugin http://digitalbush.com/projects/masked-input-plugin/

My reference:

<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>

I have my function in a script

    $(function () {
        $('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
               });

and my textbox control in a pane/updatepanel/contentTemplate

<asp:Panel ID="PanelAddPhoneNumber" runat="server" Style="display: none; min-width: 500px; min-height: 500px;" Title="Add Phone Numbers">
    <asp:UpdatePanel ID="UpdatePanelAddPhoneNums" runat="server" UpdateMode="Always">
        <ContentTemplate>

            <table>
                <tr>
                    <td>
                        <asp:Label ID="Label21" runat="server" Text="Phone Type:" />
                    </td>
                    <td>
                        <asp:DropDownList runat="server" ID="dropDownListPhoneType" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label28" runat="server" Text="Phone Number:" />
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtPhoneNum" type="text" AutoPostBack="true" Width="300" />
                    </td>
                </tr>
            </table>
            <div style="text-align: center;">
                <br />
                <br />
                <br />
                <asp:Button ID="btnAddPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnAddPhoneNum_Click" Text="Add" />
                <asp:Button ID="btnCancelPhoneNum" runat="server" OnClientClick="ButtonCancelClient();" OnClick="btnCancelPhoneNum_Click" Text="Cancel" />
                <asp:Button ID="btnDeletePhoneNum" runat="server" OnClick="btnDeletePhoneNum_Click" Text="Delete" Visible="false" OnClientClick="check();" />
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnAddPhoneNum" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="btnCancelPhoneNum" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</asp:Panel>

but when I click on my txtPhone control, there is no mask or anything.. it does nothing.

I tried changing my name in the function from txtPhone.ClientID to just txtPhone, i thought it might be the reference but it isnt since I am using like 5 other references to .js files within the same folder and they are working, and my reference is spelt correct, but I really have no idea why this isnt working.

these are all the .js being used in the project f ' rel="stylesheet" type="text/css" runat="server" /> ' rel="stylesheet" type="text/css" runat="server" /> ' rel="stylesheet" type="text/css" runat="server" /> ' type="text/javascript"> ' type="text/javascript"> ' type="text/javascript"> ' type="text/javascript">

    <script src='<%# ResolveUrl("~/Scripts/jquery-ui-1.10.1.custom.min.js")%>' type="text/javascript"></script>

        <script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>

T McKeown T McKeown · Accepted Answer · 2014-02-28T19:56:24

Make sure you are loading the CORE jQuery library and UI library:

These libraries must be loaded first: (these are just an example, use whatever version you prefer but you need jQuery loaded)

  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

this is not correct:

 $(function () {
    $('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
           });

You need to use and need to prefex the elementId with a #:

$( document ).ready(function() {
    $('#<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});

Make sure you are loading the jquery library NOT JUST THE MASKED plugin I don't see you doing that.

Masked Input Plugin not working

1 Answers