JQuery Datepicker在表、IE7、JSF应用程序中加载缓慢

Question

我有一个JSF web应用程序，在表中使用jQuery日期选择器。表显示了文档列表，每个文档旁边都有日期输入字段，该字段通过id绑定到jQuery日期选择器。如果我将jQuery脚本放在xhtml文件的最顶部，加载会很快。

问题是，当表的一部分得到ajax更新时（我们使用的是Icefaces 1.8.2），jQuery再也找不到日期输入字段id。我称之为ajax的是，我们对列出的文档标题有搜索功能，一旦搜索完成，我们应该显示结果列表。但是是结果列表，日历没有显示，我认为jQuery丢失了动态生成的列表输入字段id。

所以我把jQueryjava脚本放在输入日期字段之前，然后事情就开始工作了，这意味着在标题搜索之后，文档标题的结果列表和日期选择器一起出现了。

但问题是页面加载现在initail页面加载变得如此缓慢，超过30秒。桌子排的不是那么多，大约有100多个。下面是xhtml代码：

   <ice:dataTable var="pItem" value="#{someBackbean.somelist}"
             id="csList"
     <ice:column>
     <ice:panelGrid columns="3">
     <div>
<script type="text/javascript">     
    var jq=jQuery.noConflict();
    jq(document).ready(function(){
    //For id: The $= operator matches the end of the string and the id name mangling is always on the front.
    jq("[id$=fmv]").datepicker({
        showOn: 'button',
        buttonImage: '../../../jquery/images/calendar.gif',
        buttonText: 'Click to select a date', 
        buttonImageOnly: true,  
        duration: 'fast', 
        changeMonth: true,
        changeYear: true,
        dateFormat:'mm/dd/yy',
        yearRange: '-1:+1',
        showButtonPanel: true,
        closeText: 'Close',
        showWeek: true                      
        })
    });
         </script>
            <ice:inputText id="fmv"
                       size="10"
                       maxlength="10"
                       title="Date of Study"
                       value="#{pItem.dateOfStudy}"
                       validator="#{pItem.validate}"
                       name="fmv"
                       onchange="submit();"                  
                       valueChangeListener="#{pItem.dateChangeListener}"> 
               </ice:inputText>
           </div>  
           <ice:outputText style="color:red;cursor:pointer;"
                           title="Date is required to Print this Form" value="*"/>
           <ice:outputText value="#{pItem.label}" styleClass="nonLink"  />
           <ice:message for="fmv" styleClass="#{pItem.cssClass}" />               
        </ice:panelGrid>
     </ice:column>
  </ice:dataTable>

Answer 1

您似乎在为每一行创建日期选择器，这将非常低效。最好是单独创建按钮，然后将一个点击处理程序委托给按钮的表（因为我认为一次不需要有多个日期选择器）。然后您可以使用一个日期选择器，而不是100。这样可以加快页面加载速度。