Search code examples
javascriptjquerytypeerrormaskedinput

DigitalBush jquery maskedinput type error


I have been beating my head against the wall so to speak on this one. I am using the jquery.maskedinput plugin found here: https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js NOTE: There was a syntax error on line 29 I corrected. That problem was mentioned here: Why do I have a JavaScript parser error with this mask code? I read that there were some possible compatibility issues with maskedinput.1.3 and jquery.1.9 so I used the migrate provided here: http://jquery.com/download/ Going back to older versions only produced more errors. The problem I am having is firefox is throwing "TypeError:$(...).mask is not a function, line 21.

test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs"
    Inherits="Test.test" %>
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.12.custom.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="../Scripts/jquery.maskedinput.min.js"></script>

<%-- Begin Phone Validation Script  --%>
<script type="text/javascript">
    $(document).ready(function () {
        //Input Mask for landline phone number
        $("#<%=phone_num1.ClientID%>").mask("(999) 999-9999");
        $("#<%=phone_num2.ClientID%>").mask("(999) 999-9999");
    });
</script>
<%-- End of Phone Validation Script  --%>
</head>
<body onload="initialize()">
<form runat="server">
  <div id="consent-form-container">
        <div class="box">
            <table>
                <tr>
                    <td>
                        <asp:Label ID="Label14" runat="server" Text="Phone 1:"></asp:Label>
                    </td>
                    <td>
                       <asp:TextBox ID="phone_num1" runat="server" CssClass="client_home_ph"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="phone_validation1" runat="server" ControlToValidate="phone_num1" ErrorMessage="*" Font-Bold="True" ForeColor="Red"></asp:RequiredFieldValidator>
                    </td>
                </tr>

                <tr>
                    <td>
                        <asp:Label ID="Label17" runat="server" Text="Phone 2:"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="phone_num2" runat="server" CssClass="client_home_ph"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="phone_validation2" runat="server" ControlToValidate="phone_num2" ErrorMessage="*" Font-Bold="True" ForeColor="Red"></asp:RequiredFieldValidator>
                    </td>
                </tr>
            </table>
        </div>
   </div>
</form>
</body>
</html>

jquery.maskedinput.js code snippet where the code breaks

$.mask = {
//Predefined character definitions
definitions: {
    '9': "[0-9]",
    'a': "[A-Za-z]",
    '*': "[A-Za-z0-9]"
},
dataName: "rawMaskFn",
placeholder: '_'
};

Funny thing is I had this working almost a week ago then I added more scripts and this happened haha. Any help is greatly appreciated :)


Solution

  • OK, I figured this out finally. Here is how I fixed this problem...

    It was hard and took some time to debug this but basically you have to use an older version of jquery and upgrade it like this

    <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js" type="text/javascript></script>
    

    You call your "older" jquery version and update by inserting the 1.9 and migrate plugins as shown above.