El control incluido JQuery DatePicker no se puede incluir en otros controles

StackOverflow https://stackoverflow.com/questions/255071

Pregunta

Se me ha encomendado la tarea de implementar un selector de Fecha / Hora para varias áreas de nuestro proyecto web, y se me indicó que utilizara un control que otro desarrollador creó como parte de él. Se supone que el control en el que estoy trabajando permite al usuario elegir una fecha de un calendario, elegir un formato para la visualización de esa fecha (de varios formatos predefinidos o con una simple anulación de texto) y, opcionalmente, una cadena de tiempo (que en realidad es solo texto de forma libre).

El control que se me indicó utilizar está documentado aquí: http: // www.west-wind.com/WebLog/posts/213015.aspx , y usa el DatePicker de jQuery.

Después de implementar mi control y probarlo, comencé a integrarlo en las páginas que necesitaban entradas de fecha y / o hora. En mis pruebas de esas implementaciones, descubrí un error: cuando incluyo varias copias de mi control en una página, solo la primera obtiene el calendario jQuery. Los otros no están atados a él.

He probado algunos de los métodos sugeridos en una pregunta aparentemente relacionada (titulada 'duplicar jquery datepicker'), como llamar a la función '.datepicker ()' en el control de viento del oeste (que representa un cuadro de texto) a través de la sintaxis $ (" css-selector "). datepicker (), y ASP.NET garantiza ID únicos para todos los cuadros de texto.

Entonces, en resumen, se ve así: 

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

Ahora, la parte extraña: cuando hay varias copias del control de viento del oeste en la página, sin que el otro control de usuario las contenga, funcionan correctamente. Aparte del control jQuery, mi control no tiene nada inusual: simplemente etiquetas, cuadros de texto, paneles y menús desplegables. Algo acerca de agrupar el control jQuery de West-Wind en un control de usuario parece estar rompiéndolo.

¿Algún consejo? He estado golpeando mi cabeza contra esto por un tiempo, obstaculizado por mis pobres habilidades de JavaScript y la exposición limitada a jQuery.

Como se señala a continuación, es difícil de decir sin el HTML. Lo he incluido a continuación. 

<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>
¿Fue útil?

Solución

Difícil de saber sin ver el HTML generado, pero mi primera suposición sería que su control no está aplicando nombres de clase directamente al campo <input> ... o depende de id s de alguna manera ( que probablemente cambiaría cuando se incluyera en un control de usuario).

En el HTML que ha publicado, aparecen en tres partes relevantes:

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

...

Bloque # 2 (control: fecha1) 

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

...

Bloque # 3 (conexión de jQuery datepicker) 

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

El problema surge de este último bloque. El selector es específico para el primer control, que coincide por ID. Si se modificó para incluir una llamada separada para el segundo control ... 

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

... o un selector de uso más general ... 

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

... entonces las cosas deberían funcionar como se esperaba.

Otros consejos

Resolví el problema.

El OnPreRender () del control del servidor construye el javascript que se encuentra arriba, llama a lo siguiente, donde sbStartupScript es un StringBuilder que contiene el javascript generado: 

sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ID,
sbStartupScript.ToString(), true);

La forma correcta debería haber sido: 

sbStartupScript.AppendLine("} );");
scriptProxy.RegisterStartupScript(this.Page, typeof(ControlResources), "_cal" + this.ClientID,
sbStartupScript.ToString(), true);

Ahora, teniendo el ClientId, el nombre del script es único y ambos se mostrarán.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top