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 · Accepted Answer · 2014-02-28T20:03:06.397

1

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.

edited Feb 28 '14 at 20:03

answered Feb 28 '14 at 19:56

T McKeown

12,971
1
25
32

i also tried jQuery(function($){ $("txtPhoneNum").mask("(999) 999-9999"); }); And vice versa – Robin Q Feb 28 '14 at 19:57
I implemented it, and it still does nothing. No error, no mask. – Robin Q Feb 28 '14 at 20:02
read my answer again... where are you loading the jquery library? I only see you loading the masked plugin. The plugin depends on the jQuery library – T McKeown Feb 28 '14 at 20:03
Sorry, I commented before your edit was updated. And I do not have that library, you are right. Would you by chance know which one to use the 1.x or 2.x? I am still new to JQuery, EDIT: nevermind it just depends on which version of IE. – Robin Q Feb 28 '14 at 20:08
use the ones in my example... just paste them as-is in your – T McKeown Feb 28 '14 at 20:09
make sure you load them first, THEN your masked input – T McKeown Feb 28 '14 at 20:10
So I have all those script src's being loaded in my master, and when they were there, nothing was happening. But I moved them from my master to my current.aspx page i am working on, at the top before the masked input and I got an error message "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'mask'" Its progress. – Robin Q Feb 28 '14 at 20:20
need to see your code, i use this plugin all day long... jquery is very solid. – T McKeown Feb 28 '14 at 20:21
your javascript... how/where you load your js. – T McKeown Feb 28 '14 at 20:26
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48719/discussion-between-robin-q-and-t-mckeown) – Robin Q Feb 28 '14 at 20:28
Unfortunately, its not, and I still dont know why :/, but I marked it as best answer since it was the best, and you helped me a lot and definitely earned it. – Robin Q Feb 28 '14 at 22:06

Masked Input Plugin not working

1 Answers1

Linked