关于mvc JqueryUI框架的一个简单问题,
我有一个_layout.cshtml页面,用于初始化一组标签
我的视图上有一个jqueryUI日期选择器。
将View动态加载到选项卡中并显示,但如果我在选项卡上加载View的后续实例,则datepicker将仅填充datepicker的第一个实例。
我的问题是这个 1. MVC使用独立的对象来创建具有与视图相同的ID的独立视图 2. JQueryUI使用具有唯一ID的XML Dom来创建其基础对象
那么这些应该如何协同工作呢? 我的观点如下
<div class="PoCreate">
<div id="pnlProject">
<fieldset>
<legend>Project</legend>
<label for="ProjectNo">
Project #:
</label>
<input type="text" name="ProjectNo" id="ProjectNo" />
<input type="button" name="btnProjectNo" id="btnProjectNo" data-linked-search="@Url.Action("Project", "SearchObj")"
value=".." />
</fieldset>
</div>
</div>
@Url.Script("~/scripts/PageScripts/_PoIndex.js")
脚本文件包含
$('.PoCreate').PoCreate({});
并且PO函数包含
$.fn.extend({
PoCreate: function (opt)
{
$(this).each(function ()
{
var _self = $(this.parentNode),
_opts = {}, tabIdContext = $(this.parentNode).attr('id');
$.extend(_opts, (opt || {}));
$('.date', _self).each(function ()
{
$(this).attr('id', tabIdContext + '-' + $(this).attr('id'));
$(this).datepicker(Globals.Dates).keypress(function (e) { return false; });
})
$(':button').button().filter('[data-linked-search]').click(function (e)
{
$.extendedAjax({ url: $(this).attr('data-linked-search'),
success: function (response)
{
$('#dialog-form').find('#dialog-search').html(response).dialog(Globals.Dialogs);
}
});
});
});
}
});
答案 0 :(得分:0)
我找到了解决这个问题的方法,
在创建JQuery小部件时,我必须重命名DatePicker字段的ID,以使其对于创建的选项卡是唯一的。
所以我的TabId = ui-tab-01 和DatePickerId = DatePicker1
重命名DatePickerId,使其现在为ui-tab-01-DatePicker1