0

I am using "jquery.maskedinput" with jquery v 2.2.1. When the page loads I get an "Object doesn't support property or method 'mask'" exception.

Here is the view:

@{
    ViewBag.Title = "Edit Profile";
 }

<h2>Edit Profile</h2>
@using (Ajax.BeginForm("Edit", "Profile", new AjaxOptions { @HttpMethod = "Post", OnComplete = "processMessageFromController" }, new { id = "changePasswordForm" }))
{
    @Html.HiddenFor(m => m.Email)
    <div style="background-color: #ecf0f1; width: 45%; border-radius: 15px;">
        <fieldset>
            <div id="phone" class="form-group" style="margin-top: 15px;">
                <label class="col-lg-4 control-label" style="margin-top: 9px;">Telephone:</label>
                <div>
                    <input type="text" id="telephone" value="5551234567" />
                </div>
            </div>
        </fieldset>
    </div>
}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<script src="~/Scripts/jquery.maskedinput.min.js"></script>
<script src="~/Scripts/Custom/profileFuctions.js"></script>

Here is the javascript:

$(document).ready(function () {
    $("#telephone").mask("(999) 999-9999");
});

From the _Layout:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

From BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/jquery.unobtrusive-ajax.min.js"));

I see a bunch of Q's and A's here but none of them are helping. Can someone shed some light on this for me? Thanks in advance.

Trenton
  • 265
  • 1
  • 3
  • 16
  • I the maskedinput JS file loading? What does WebInspector, Firebug, etc... network panel show for that file? Can you navigate to `http://host/~/Scripts/jquery.maskedinput.min.js`? – DBagBaggerWithSwagger Feb 27 '16 at 16:17
  • Yes it is loading up and I can navigate to it. All required .js files are loaded and present in the Sources tab of the Dev Tools – Trenton Feb 27 '16 at 16:23
  • It's is likely a JS loading issue. I would remove all JS but jQuey and the mask plugin and/or copy the HTML that's generated and create a JSFiddle to whittle down the source. – DBagBaggerWithSwagger Feb 27 '16 at 16:39
  • This is weird , all your code seems fine. Just try your code with nothing but a input field and only the mask plugin in the page and check what happens. – Rajshekar Reddy Feb 27 '16 at 19:44

0 Answers0