I need another set of eyes: jQuery in MVC not working

Question

I am trying to build a MVC form where when the page loads, the input for a phone number shows up as "( ) ___-____". I'm trying to use Digital Bush's masked plug in for this. So far, it is not showing up when the page loads. What am I doing wrong? I've been looking at this for hours, and I can't see it. Here's what I've done so far:

First off, here's what's in my MVC model:

    [Required]
    [Display(Name = "Home Phone Number")]
    public string Buy1HomePhone { get; set; }

    [Required]
    [Display(Name = "Cell Phone Number")]
    public string Buy1CellPhone { get; set; }

1.) I took the source code from Digital Bush and pasted it into a javascript file labeled maskedinput.js

2.) In maskedinput.js, I added the following code:

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

3.) I added the following id tags to my phone number input boxes:

             <div class="form-group">
                @Html.LabelFor(model => model.Buy1HomePhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="phone">
                    @Html.EditorFor(model => model.Buy1HomePhone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Buy1HomePhone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Buy1CellPhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10" id="phone">
                    @Html.EditorFor(model => model.Buy1CellPhone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Buy1CellPhone, "", new { @class = "text-danger" })
                </div>
            </div>

4.) I added the maskedinput.js to the Scripts in the view:

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/CarrieJQueryTest.js")
@Scripts.Render("~/Scripts/maskedinput.js")}

Answer 1

I think you need to initalize the mask on the input element not the div . Also, since you have 2 you should make it a class and not an id (ie <div class="col-md-10" class="phone"> )

Like this:

$(document).ready(function () {
$('.phone input').mask("(999) 999-9999");});

Answer 2

You are making the mask on the element with id "phone":

$('#phone').mask("(999) 999-9999");});

But this element is a div .

<div class="col-md-10" id="phone">

Just put the mask on the input element. Here is your solution:

$('#phone .form-control').mask("(999) 999-9999");});

as long as "form-control" is the class you gave to your phone number element.

You should consider giving it a more specific class to be sure than you will not apply the mask to other unwanted elements.

Answer 3

I fixed it! I don't understand why this is the fix, but it is. Here is my new code:

In the view...

             <div class="form-group">
                @Html.LabelFor(model => model.Buy1HomePhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.Buy1HomePhone, new { id = "applicantHomePhone", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Buy1HomePhone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Buy1CellPhone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.Buy1CellPhone, new { id = "applicantCellPhone", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Buy1CellPhone, "", new { @class = "text-danger" })
                </div>
            </div>

I ended up changing the EditorFor to a TextBoxFor and then adding an id for the jQuery to recognize it. I tried doing multiple classes, but Visual Studio was NOT happy. I also tried to do the same id on each TextBoxFor, but that did not work. Only the first input box with the id tag had the jQuery show up. So until I can find a more efficient way to do this, I will be doing unique id tags for each phone number on the page.

Here is what my jQuery looks like:

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

Thank you all for leading me in the right direction!