digitalBush jQuery Mask not working with asp.net mvc3 IE9

Question

I am trying to add a SIN # mask of 999-999-999 on an input box which has other validation specified in the controller. However, for some reason it's not firing - when I load the page and click in the textbox, nothing happens other than the standard blinking cursor with no mask showing. I'm testing in IE 9.0.112.

I've added the scripts as well as the script on the Site.Master page after downloading the plugin from DigitalBush.

<script type = "text/javascript" src="/Scripts/jquery-1.8.3.min.js" />
<script type = "text/javascript" src="/Scripts/jquery.maskedinput-1.3.js" />

<script type = "text/javascript">
$(document).ready(function () {   
$("#Sin").mask("999-999-999");
});
</script>

On my PersonCreate page which is loaded in the content area of the Site.Master page, I have an HTML helper textbox defined:

<%=Html.TextBoxFor(c => Model.Sin, new {maxlength=11})

I looked at the source after I ran the app and it's rendered as <input name="Sin" id="Sin" type="text" maxLength="11" value=""/>

The scripts are located in MySolutionName/Scripts/ folder. I've tried the following:

• changing from jQuery(function ($) {... to $(document).ready(function()
• linking to an older library: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
• using Url.Content instead of the standard option to link in the jquery files

Could someone please tell me what I might be missing? Thanks so much in advance.

Answer 1

Turns out that for some reason, when I typed in the name/path for the javascript files, I didn't have the right path specified. The best way to get around this problem is to simply drag and drop the file from the Solution Explorer directly into the Site.Master file, where all the scripts are being specified.