Связанный элемент управления JQuery DatePicker не может быть включен в другие элементы управления - PullRequest
Новая
       36

Связанный элемент управления JQuery DatePicker не может быть включен в другие элементы управления

1 голос
/ 01 ноября 2008

Мне было поручено внедрить селектор даты / времени для нескольких областей нашего веб-проекта, и я получил указание использовать элемент управления, созданный другим разработчиком в качестве его части. Элемент управления, над которым я работаю, должен позволять пользователю выбирать дату из календаря, выбирать формат для отображения этой даты (из нескольких предопределенных форматов или с простым переопределением текста) и, необязательно, строку времени (что на самом деле просто произвольный текст).

Элемент управления, который мне было поручено использовать, задокументирован здесь: http://www.west -wind.com / WebLog / posts / 213015.aspx и использует DatePicker из jQuery.

После того, как я реализовал свой контроль и протестировал его, я начал интегрировать его в страницы, которые требовали ввода даты и / или времени. При тестировании этих реализаций я обнаружил ошибку: когда я включаю несколько копий своего элемента управления на страницу, только первая получает календарь jQuery. Остальные не привязаны к нему.

Я попробовал некоторые методы, предложенные в кажущемся связанном вопросе (озаглавленном «дублирование jquery datepicker»), например, вызов функции «.datepicker ()» в элементе управления west-wind (который отображает текстовое поле) синтаксис $ ("css-selector"). datepicker (), а ASP.NET гарантирует уникальные идентификаторы для всех текстовых полей.

Итак, в итоге, это выглядит так: 

<page>
  <mycontrol>
   <west-windjQuerycontrol />
  </mycontrol>
  <mycontrol>
   <west-windjQuerycontrol />
  </mycontrol>
</page>

Теперь странная часть: если на странице имеется несколько копий элемента управления west-wind, а другой пользовательский элемент управления не содержит их, они работают правильно. Помимо элемента управления 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&amp;t=633481894229838141" type="text/javascript"></script>


<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW_lQpnYjRbyIYThTnHtD9rt0&amp;t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=8KwRIGaNAD3hi2Loz3YV-uxgrdZpGe8nnwH5E3gxLW-K0Kuw-pGK1O3mE_r1y3sjKmhHtQjSXeMtYSim0bjyGA2&amp;t=633613004148118290" type="text/javascript"></script>
<script src="/SSO/DE/ScriptResource.axd?d=Id5yAacLMZHF7TWlkgrrid30ZStmsXuLHcF6WQ404YLySP4Itj4qxv2wi9ffbsWQA86oLdnZPWkwDnu4NKxfG1Ue7qdGG1SbOfb4ooHVs7M1&amp;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&amp;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>

Ответы [ 2 ]

1 голос
/ 03 ноября 2008

Я разобрался в проблеме.

OnPreRender () серверного элемента управления создает приведенный выше javascript, вызывает следующее, где sbStartupScript - это StringBuilder, который содержит сгенерированный javascript: 

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, имя сценария уникально, и оба будут отображаться.

1 голос
/ 01 ноября 2008

Трудно понять, не увидев сгенерированный HTML, но я думаю, что ваш элемент управления не применяет имена классов непосредственно к полю <input> ... или вы каким-то образом зависите от id s ( который, вероятно, изменится, если встроен в пользовательский элемент управления).

В размещенном вами HTML-коде они представлены в трех соответствующих частях:

Блок № 1 (элемент управления: 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>

...

Блок № 2 (контроль: дата1) 

<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>

...

Блок № 3 (соединение с датой выбора jQuery) 

<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>

Проблема возникает из этого последнего блока. Селектор специфичен для первого элемента управления, совпадает по идентификатору. Если он был изменен, чтобы включить отдельный вызов для второго элемента управления ... 

      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'});

... тогда все должно работать как положено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...