Javascript 显示模式窗口后,jQuery验证插件不';行不通
我有一个问题。 我使用了ASP.NETMVC和实体框架。该项目有很多库,很难理解问题并找到答案。 我有一个表格,上面有字段的部分。我使用验证插件验证客户端字段。 该部分是可折叠的,可以打开和关闭。内部部分我有打开模式窗口的按钮。在窗口内,我可以使用Ajax搜索数据。用户可以手动添加信息,可以使用Ajax添加信息,字段可以为空。 第一项任务是为隐藏字段添加验证。 我在$(文档)中添加了验证器的setDefault。准备: 当我为验证器添加设置ignore时,隐藏字段和打开字段都可以正常工作,但在显示模式窗口后,验证器插件无法工作。在FireBug中,我犯了一个错误:TypeError:验证器未定义(两次)。 我打开并关闭了模式窗口(没有Ajax搜索),我接受了这个错误,验证程序不工作 这是模态窗口代码:Javascript 显示模式窗口后,jQuery验证插件不';行不通,javascript,jquery,ajax,twitter-bootstrap,validation,Javascript,Jquery,Ajax,Twitter Bootstrap,Validation,我有一个问题。 我使用了ASP.NETMVC和实体框架。该项目有很多库,很难理解问题并找到答案。 我有一个表格,上面有字段的部分。我使用验证插件验证客户端字段。 该部分是可折叠的,可以打开和关闭。内部部分我有打开模式窗口的按钮。在窗口内,我可以使用Ajax搜索数据。用户可以手动添加信息,可以使用Ajax添加信息,字段可以为空。 第一项任务是为隐藏字段添加验证。 我在$(文档)中添加了验证器的setDefault。准备: 当我为验证器添加设置ignore时,隐藏字段和打开字段都可以正常工作,但在显
@using (modal.BeginBody()){
<div class="row">
<div class="col-lg-offset-3 col-lg-6" id="search-entry-form">
@using (var form = Html.Bootstrap().Begin(new Form().HtmlAttributes(new { onsubmit = "return false" })))
{
@form.FormGroup().TextBoxFor(model => model.EANCode).Label();
@form.FormGroup().TextBoxFor(model => model.Name).Label();
@form.FormGroup().TextBoxFor(model => model.InternationalName).Label();
@Html.Bootstrap().Div(Html.Bootstrap().SubmitButton().Text("Wyszukaj").Id("search-specific").Style(ButtonStyle.Success).
ButtonBlock().PrependIcon("glyphicon glyphicon-search")).Class("col-lg-5 col-lg-offset-7");
}
</div>
</div>
<div class="col-lg-12 top30" id="result-table"></div>}@using (modal.BeginFooter()){@Html.Bootstrap().Button().Text("Zamknij").Data(new { dismiss = "modal" }).Style(ButtonStyle.Primary)}
这是Ajax代码:
@Scripts.Render("~/bundles/specificNutSearch")
$(document).ready(function () {
function pagination() {
$('#result-table').each(Utils.Pagination);
}
function getData(id) {
$.ajax({
url: "GetSpecific",
dataType: "json",
method: "POST",
cache: false,
data: {
id: id
},
}).success(function (result) {
if (result === null) return;
for (var propName in result) {
$(".panel [Name$='." + propName + "']").val(result[propName]);
}
clear();
});
}
function clear() {
$("#result-table").html("");
$(".modal input").val("");
$(".pager").remove();
}
function search() {
var form = $("#search-entry-form :input").serialize();
$.ajax({
url: $('#search-entry-form form').attr('action'),
dataType: "html",
method: "POST",
cache: false,
data: form
}).success(function (result) {
$("#result-table").html(result);
$(".select-specific").on("click", function () { getData($(this).data("specific")) });
pagination();
});
}
$("#search-specific").on("click", search);});
这是需要验证的字段代码:
Html.Bootstrap().Div(
Html.Bootstrap().Label("").LabelText("4.").Class("pull-left"),
Html.Bootstrap().FormGroup().TextBoxFor(model => model.EAN).Label()).Class("col-lg-6")
在chhtml视图中,我在底部文件上添加了模式窗口:
<div class="modal fade" id="specificNutritionalPurposeSearch" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
还发现了一件非常奇怪的事情:
当我注释掉所有specificNutSearch(@Scripts.Render(“~/bundles/specificNutSearch”))代码时,插件不起作用。但当我注释掉@Scripts.Render(“~/bundles/specificNutSearch”行时,插件起作用
可能是什么问题?可能是jQuery和Validator插件版本不兼容的问题
编辑:
这是“打开模型”窗口的按钮代码:
@Html.Bootstrap().Button().Text("Wyszukaj środek spożywczy").TriggerModal("specificNutritionalPurposeSearch").HtmlAttributes(new { href = Url.Action("SearchSpecificNutritionalPurpose") }).Style(ButtonStyle.Success).ButtonBlock().PrependIcon("glyphicon glyphicon-search")
这是控制器中的操作结果:
[HttpGet]
public ActionResult SearchSpecificNutritionalPurpose()
{
var model = new SpecificNutritionalPurposeSearchViewModel();
return PartialView("Modals/_SpecificNutritionalPurposeDictionarySearch", model);
}
在动作模型中为空,因为模态窗口有用于搜索数据的按钮
这是用于搜索数据的模式窗口中搜索按钮的ActionResult:
[HttpPost]
public virtual ActionResult SearchSpecificNutritionalPurpose(SpecificNutritionalPurposeSearchViewModel searchParameters)
{
var searchResult = _dictionaryRepository.FindSpecificNutritionalPurpose(searchParameters.EANCode, searchParameters.Name, searchParameters.InternationalName).Take(100).ToList();
return PartialView("Modals/_SpecificNutritionalPurposeSearchResult", searchResult);
}
方法FindSpecificNutritionalPurpose从数据库(EF)获取数据我认为,当specyficNutSearch脚本更改DOM时,验证处理程序将被删除 我的解决方案是更改clear方法,以便刷新验证处理程序:
function clear() {
$("#result-table").html("");
$(".modal input").val("");
$(".pager").remove();
//add this
var $form = $("#search-entry-form form");
$form.removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($form);
}
打开模式的代码或和/或按钮在哪里?specificNutSearch捆绑包的内容是什么?是您自己的自定义脚本吗?我添加了信息。specificNutSearch=这是我文章顶部的脚本。(这是Ajax代码)
[HttpPost]
public virtual ActionResult SearchSpecificNutritionalPurpose(SpecificNutritionalPurposeSearchViewModel searchParameters)
{
var searchResult = _dictionaryRepository.FindSpecificNutritionalPurpose(searchParameters.EANCode, searchParameters.Name, searchParameters.InternationalName).Take(100).ToList();
return PartialView("Modals/_SpecificNutritionalPurposeSearchResult", searchResult);
}
function clear() {
$("#result-table").html("");
$(".modal input").val("");
$(".pager").remove();
//add this
var $form = $("#search-entry-form form");
$form.removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($form);
}