Project

General

Profile

Bug #1993

Updated by Rafael Ostertag almost 8 years ago

The (jqw) datepicker introduced in commit:cd565668edef31d6cf72b91ed745fc8401126f39 does not support dynamic updates. This is preliminary caused by the way jqxDateTimeInput is implemented and how we're handling dynamic updates. 

 h2. How we're handling dynamic updates 

 When sending queries to the server, the server may respond with instructions on what input elements to update. The instructions contain the @name@ of the @<input>@ elements. We then decide based on the @type@ of the @<input>@ element how it should be updated. Further, we only expect native form elements. 

 h2. How's jqxDateTimeInput implemented 

 jqxDateTimeInput uses a container and puts its stuff in it. Let's say we define the container to be 

 <pre> 
   <div id="jqxdatetimeinput"></div> 
 </pre> 

 in HTML. After telling jqxDateTimeInput to use that container, it becomes 

 <pre> 
 <div aria-label="Current focused date is 5/17/2016, 12:00:00 AM" 
      aria-disabled="false" 
      aria-valuemax="Fri Jan 01 2100 00:00:00 GMT+0100 (CET)" 
      aria-valuemin="Mon Jan 01 1900 00:00:00 GMT+0100 (CET)" 
      aria-valuetext="17.05.2016 00:00" 
      aria-valuenow="Tue May 17 2016 00:00:00 GMT+0200 (CEST)" 
      aria-readonly="false" 
      aria-haspopup="true" 
      aria-owns="calendarjqxWidgeta5668414" 
      style="width: 300px; height: 25px;" 
      role="textbox" 
      data-role="input" 
      id="jqxdatetimeinput" 
      class="jqw-datetimepicker jqx-widget jqx-datetimeinput jqx-input jqx-overflow-hidden jqx-rc-all jqx-reset jqx-clear jqx-widget-content"> 
     <div class="jqx-max-size jqx-position-relative"> 
        <input placeholder="" 
               style="border: medium none; padding: 4px 3px; width: 262px; left: 0px; top: 0px; text-align: left;" 
               class="jqx-position-absolute jqx-reset jqx-clear jqx-input-content jqx-widget-content jqx-rc-all" 
               id="inputpersonGeburtstag" autocomplete="off" 
               type="textarea"> 
        <div style="height: 100%; width: 19px; left: 263px;" 
             class="jqx-position-absolute jqx-action-button jqx-fill-state-normal jqx-default"> 
           <div class="jqx-icon jqx-icon-calendar"> 
           </div> 
        </div> 
        <div style="height: 100%; width: 19px; left: 282px;" 
             class="jqx-position-absolute jqx-action-button jqx-default jqx-fill-state-normal jqx-rc-r"> 
            <div class="jqx-icon jqx-icon-time"> 
            </div> 
        </div> 
    </div> 
 </div> 
 </pre> 
 jqxDateTimeInput is comprised of several @<div>@. @<div>@s. The input is realized using an @<input>@ of type @textarea@. 

 h2. The Problem 

 Our code can't select the @<input>@ element, because it has no name. Even if we could select it, we wouldn't have any knowledge about it belonging to a @jqxDateTimeInput@.

Back