Masked input plugin not working
EDIT: I found an answer that fixed my problem at this link How to make a JQuery plugin with masked input working after AsyncPostback in an asp.net Ajax Update pannel?
I am using this plugin http://digitalbush.com/projects/masked-input-plugin/
My recommendation:
<script src='<%# ResolveUrl("~/Scripts/jquery-maskedInput-1.3.1.js")%>' type="text/javascript"></script>
I have my function in script
$(function () {
$('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
and my textbox control in panel / 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 the txtPhone control there is no mask or whatever .. it does nothing.
I tried to change my name in the function from txtPhone.ClientID to txtPhone, I thought it might be a link, but it is not as I use like 5 other links to .js files in the same folder and they work and mine the link is spelled correctly, but I really don't know why it doesn't work.
all these .js are used in the project e '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>
source to share
Make sure you are loading the jQuery CORE library and the UI library:
These libraries must be loaded first: (this is just an example, use whichever version you prefer, but you need to download jQuery)
<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 true:
$(function () {
$('<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
You need to use and use the prefex elementId with #:
$( document ).ready(function() {
$('#<%= txtPhoneNum.ClientID %>').mask("(999) 999-9999");
});
Make sure you load the jQuery library NOT ONLY MASKED plugin I can't see how you do this.
source to share