JQuery DatePicker捆绑控件不能包含在其他控件中
https://stackoverflow.com/questions/255071
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我的任务是为我们的Web项目的几个区域实现日期/时间选择器，并指示使用另一个开发人员创建的控件作为其中的一部分。我正在处理的控件应该允许用户从日历中选择日期，选择显示该日期的格式（从几种预定义的格式，或使用简单的文本覆盖）和可选的时间字符串（这实际上只是自由形式的文本）。
我指示使用的控件在此处记录： http：// www.west-wind.com/WebLog/posts/213015.aspx ，并使用jQuery中的DatePicker。
在我实现我的控件并对其进行测试后，我开始将其集成到需要日期和/或时间输入的页面中。在我对这些实现的测试中，我发现了一个错误：当我在页面上包含我的控件的多个副本时，只有第一个获取jQuery日历。其他人并不依赖它。
我尝试了一个与看似相关的问题（名为'复制jquery datepicker'）中建议的一些方法，例如在west-wind控件（渲染文本框）上调用'.datepicker（）'函数$（<！> quot; css-selector <！> quot;）。datepicker（）语法，ASP.NET保证所有文本框的唯一ID。
所以，总之，它看起来像这样：
<page>
<mycontrol>
<west-windjQuerycontrol />
</mycontrol>
<mycontrol>
<west-windjQuerycontrol />
</mycontrol>
</page>
现在，奇怪的部分：当页面上有多个西风控制副本时，如果没有包含它们的其他用户控件，它们就能正常工作。除了jQuery控件之外，我的控件没有什么不寻常之处：只需标签，文本框，面板和下拉菜单。关于将West-Wind jQuery控件捆绑到用户控件中的事情似乎正在破坏它。
有什么建议吗？一段时间以来，我一直在抨击我的头脑，受到我糟糕的javascript技能和jQuery的有限接触的阻碍。
如下所述，没有HTML，很难说。我把它包括在下面。
<form name="form1" method="post" action="ControlTest.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU4NjEzMDEwOQ9kFgICAw9kFgQCAw9kFgRmD2QWAgIDD2QWAgIDDxBkZBYBZmQCAg9kFgICAw9kFgICAQ8QZGQWAWZkAgUPZBYEZg9kFgICAw9kFgICAw8QZGQWAWZkAgIPZBYCAgMPZBYCAgEPEGRkFgFmZGRDjfLpdb+XxaVaQYP2XkPil2Galw==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/SSO/DE/WebResource.axd?d=jMPpL-KK8_mPj_ssZzGblw2&t=633481894229838141" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW_lQpnYjRbyIYThTnHtD9rt0&t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW-K0Kuw-pGK1O3mE_r1y3sjKmhHtQjSXeMtYSim0bjyGA2&t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQA86oLdnZPWkwDnu4NKxfG1Ue7qdGG1SbOfb4ooHVs7M1&t=633481957084709567" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQhT3MFELBAa2rFJZXnSlYAZIN7RT1npcBxJRsWGjJWIwTF0Es1m0vOd-xYnFqWJKz0&t=633481957084709567" type="text/javascript"></script>
<div style="margin:25px 10px;width:100%;">
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('stupidThing', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<div id="datePicker_Div0" class="AdminRowOdd DERow">
<div id="datePicker_Div1" class="DELabel">
<span id="datePicker_DateLabel">Date</span>
</div>
<div id="datePicker_Div2" class="DEInput datePicker">
<input name="datePicker$DateSelector" type="text" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateSelector\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="datePicker_DateSelector" style="width:80px;" />
<select name="datePicker$languageSelector" onchange="javascript:setTimeout('__doPostBack(\'datePicker$languageSelector\',\'\')', 0)" id="datePicker_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
<div id="datePicker_Div3" class="AdminRowEven DERow">
<div id="datePicker_Div4" class="DELabel">
<span id="datePicker_FormatChoiceLabel">Choose your display format: </span>
</div>
<div id="datePicker_Div5" class="DEInput">
<select name="datePicker$DateFormatSelector" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateFormatSelector\',\'\')', 0)" id="datePicker_DateFormatSelector">
<option selected="selected" value="Choose a date first">Choose a date first</option>
</select>
</div>
</div>
<div id="datePicker_Div6" class="AdminRowOdd DERow">
<div id="datePicker_Div7" class="DELabel">
<span id="datePicker_FormatOverrideLabel">Or enter your own text</span>
</div>
<div id="datePicker_Div8" class="DEInput">
<input name="datePicker$DateFormatOverride" type="text" onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateFormatOverride\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="datePicker_DateFormatOverride" />
</div>
</div>
<br />
<div id="date1_Div0" class="AdminRowOdd DERow">
<div id="date1_Div1" class="DELabel">
<span id="date1_DateLabel">Date</span>
</div>
<div id="date1_Div2" class="DEInput datePicker">
<input name="date1$DateSelector" type="text" onchange="javascript:setTimeout('__doPostBack(\'date1$DateSelector\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="date1_DateSelector" style="width:80px;" />
<select name="date1$languageSelector" onchange="javascript:setTimeout('__doPostBack(\'date1$languageSelector\',\'\')', 0)" id="date1_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
<div id="date1_Div3" class="AdminRowEven DERow">
<div id="date1_Div4" class="DELabel">
<span id="date1_FormatChoiceLabel">Choose your display format:</span>
</div>
<div id="date1_Div5" class="DEInput">
<select name="date1$DateFormatSelector" onchange="javascript:setTimeout('__doPostBack(\'date1$DateFormatSelector\',\'\')', 0)" id="date1_DateFormatSelector">
<option selected="selected" value="Choose a date first">Choose a date first</option>
</select>
</div>
</div>
<div id="date1_Div6" class="AdminRowOdd DERow">
<div id="date1_Div7" class="DELabel">
<span id="date1_FormatOverrideLabel">Or enter your own text</span>
</div>
<div id="date1_Div8" class="DEInput">
<input name="date1$DateFormatOverride" type="text" onchange="javascript:setTimeout('__doPostBack(\'date1$DateFormatOverride\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="date1_DateFormatOverride" />
</div>
</div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWFQLr6MeTCwKb1Zr0AwKVt6utCQKIwaTjAQKdwYzzBwLiwsDhDQKIwdCLBAKHwbCtCgLRr42cCQKi9vj4DgK2lM6kBQLLrsUtAsaboRMC2+2u3QgCzu2GzQ4Cse7K3wQC2+3atQ0C1O26kwMCpdTivwwC1o2X2wsCoubqnQk8I1BK30Q/iVw/rExUww2Cs4bicw==" />
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function() {
var cal = jQuery('#datePicker_DateSelector').datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
} );
Sys.Application.initialize();
//]]>
</script>
</form>
解决方案
很难知道没有看到生成的HTML，但我的第一个猜测是你的控件没有直接将类名应用到<input>字段......或者你在某种程度上取决于id s（嵌入用户控件时可能会发生变化。）
在您发布的HTML中，这些显示为三个相关部分：
Block＃1（control：datePicker）
<div id="datePicker_Div0" class="AdminRowOdd DERow">
<div id="datePicker_Div1" class="DELabel">
<span id="datePicker_DateLabel">Date</span>
</div>
<div id="datePicker_Div2" class="DEInput datePicker">
<input name="datePicker$DateSelector" type="text"
onchange="javascript:setTimeout('__doPostBack(\'datePicker$DateSelector\',\'\')', 0)"
onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;"
id="datePicker_DateSelector" style="width:80px;" />
<select name="datePicker$languageSelector"
onchange="javascript:setTimeout('__doPostBack(\'datePicker$languageSelector\',\'\')', 0)"
id="datePicker_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
...
Block＃2（control：date1）
<div id="date1_Div0" class="AdminRowOdd DERow">
<div id="date1_Div1" class="DELabel">
<span id="date1_DateLabel">Date</span>
</div>
<div id="date1_Div2" class="DEInput datePicker">
<input name="date1$DateSelector" type="text"
onchange="javascript:setTimeout('__doPostBack(\'date1$DateSelector\',\'\')', 0)"
onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;"
id="date1_DateSelector" style="width:80px;" />
<select name="date1$languageSelector"
onchange="javascript:setTimeout('__doPostBack(\'date1$languageSelector\',\'\')', 0)"
id="date1_languageSelector">
<option selected="selected" value="en-US">en-US</option>
<option value="fr-CA">fr-CA</option>
<option value="fr-FR">fr-FR</option>
<option value="es-ES">es-ES</option>
<option value="es-MX">es-MX</option>
</select>
</div>
</div>
...
Block＃3（jQuery datepicker wireup）
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function()
{
// matches input element for first control only (id selector)
var cal = jQuery('#datePicker_DateSelector')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
});
Sys.Application.initialize();
//]]>
</script>
问题出现在最后一个块上。选择器特定于第一个控件，按ID匹配。如果它被修改为包含对第二个控件的单独调用...
var cal = jQuery('#datePicker_DateSelector')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
var cal2 = jQuery('#date1_DateSelector')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
......或更通用的选择器......
// matches all text input elements that are descendants of
// a div element with a class of datePicker
var cal = jQuery('div.datePicker input:text')
.datepicker({yearRange: '-1500:+100',dateFormat: 'm/d/yy'});
......然后事情应该按预期工作。
其他提示
我发现了问题。
服务器控件的OnPreRender（）构建上面找到的javascript，调用如下，其中sbStartupScript是一个包含生成的javascript的StringBuilder：
sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ID,
sbStartupScript.ToString(), true);
正确的表格应该是：
sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ClientID,
sbStartupScript.ToString(), true);
现在，拥有ClientId，脚本名称是唯一的，两者都将呈现。
不隶属于 StackOverflow
