Форма MVC не публикуется при использовании document.ready

Question

У меня есть проект MVC, и в одном представлении мне нужно заполнить форму и разместить ее. Я смог это сделать, но когда я хотел добавить маскировку в текстовое поле, я использовал функцию document.ready, и это заставило кнопку submit не реагировать ни на что. Без этого document.ready функция работает нормально. (Но это, конечно, не включает маскировку.) Я посмотрел на несколько решений, но не смог получить никакого результата. Что я делаю не так?

Мой код:

@model Models.model 

<script type="text/javascript"> 

jQuery(function ($) { 
    $("#txtPhone").mask("0(999) 999-99-99"); 
}); 

function disableSubmitButton() { 

    document.getElementById("btnSubmit").value = "Wait"; 

}; 

</script> 

<div id="dvAjax"> 
@if (Model.SomeList!= null) 
{ 

    using (Ajax.BeginForm("View", "Controller", new AjaxOptions { UpdateTargetId = "divdiv", HttpMethod = "Post", OnBegin = "disableSubmitButton()" }, new { id = "frmfrm", name = "frmfrm" })) 
    { 

      <p> 
       Your phone: @Html.TextBoxFor(m => m.phone, new { maxlength = 10, size = 10, id = "txtPhone" }) 


       <input id="btnSubmit" name="btnSubmit" type="submit" class="someClass" 
         value="Cont." /> 
      </p> 
    } 

} 
</div> 

и контроллер:

public ActionResult View(Model model, string btnSubmit) 
{ 
    //some code 

    return PartialView("View", model); 
} 

это, как я включить Jquery и маски файлов:

public static void RegisterBundles(BundleCollection bundles) 
    { 

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

     bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-{version}.js", 
        "~/Scripts/jquery-ui-timepicker-addon.js", 
        "~/Scripts/jquery.maskedinput.js", 
        "~/Scripts/jquery.cookie.js" 
        )); 

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

     bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.min.js", 
        "~/Scripts/bootstrap-collapse.js", 
        "~/Scripts/bootstrap-modal.js", 
        "~/Scripts/bootstrap-dropdown.js")); 

....... 

Answer 1

так, наконец, я изменил плагин я использовал для маскировки и управляемой. первый из них как-то конфликтует и не работает с публикацией формы. я не знаю. это было что: http://digitalbush.com/projects/masked-input-plugin/

тогда я попробовал это, и она работала: http://www.jqueryscript.net/form/Input-Field-Data-Formatting-Plugin-Mask.html

спасибо всем.

Answer 2

Для АЯКС загруженного содержимого вы должны использовать

$(document).ajaxComplete(function() { 
... 
}); 

вместо

$(document).ready(...) 

См here документации.

Answer 3

Вы должны поместить свой сценарий в заполнитель @section scripts, определенный в вашем Shared/_Layout виде.

Моя догадка jQuery не заряжается на этом этапе. Я бы ожидал ошибки.

Также убедитесь, что mask является актуальной функцией. Вы используете плагин? плагин включен? После jquery?

Попробуйте это:

@model Models.model 
@section scripts{ 
<script type="text/javascript"> 

$(function() { 
    $("#txtPhone").mask("0(999) 999-99-99"); 
}); 

function disableSubmitButton() { 

    document.getElementById("btnSubmit").value = "Wait"; 

}; 

</script> 
} 
<div id="dvAjax"> 
@if (Model.SomeList!= null) 
{ 

    using (Ajax.BeginForm("View", "Controller", new AjaxOptions { UpdateTargetId = "divdiv", HttpMethod = "Post", OnBegin = "disableSubmitButton()" }, new { id = "frmfrm", name = "frmfrm" })) 
    { 

      <p> 
       Your phone: @Html.TextBoxFor(m => m.phone, new { maxlength = 10, size = 10, id = "txtPhone" }) 


       <input id="btnSubmit" name="btnSubmit" type="submit" class="someClass" 
         value="Cont." /> 
      </p> 
    } 

} 
</div>