JQuery Datepicker 테이블, IE7, JSF App에서 느린 로딩

Question

테이블에 jQuery datepicker를 사용하여 JSF 웹 앱이 있습니다. 테이블은 각 문서 옆에있는 문서 목록을 보여 주며 id를 통해 jQuery datepicker에 바인드되는 날짜 입력 필드를 갖습니다. jquery 스크립트를 xhtml 파일 맨 위에 넣으면로드가 빠릅니다.

문제는 테이블의 일부가 Iceworks 1.8.2를 사용하여 업데이트 된 아약스를 가져올 때 jQuery가 해당 날짜 입력 필드 ID를 더 이상 찾을 수 없다는 점입니다. 내가 아약스라고 부르는 것은 나열된 문서 제목에 대한 검색 기능을 가지고 있으며 일단 검색이 끝나면 결과 목록을 표시해야합니다. 그러나 결과 목록, 달력 복용량 표시되지 않습니다, 나는 jQuery 그 dynmically 생성 된 목록 입력 필드 ID를 잃은 것 같아요.

입력 날짜 필드 바로 앞에 jQuery 자바 스크립트를 넣은 다음 작업이 시작되었습니다. 제목 검색 후 documetation 제목의 결과 목록이 datepicker와 함께 나타납니다.

하지만 문제는 페이지로드가 30 초가 넘는 매우 느린 initail 페이지 로딩입니다. 테이블 행은 그다지 많지 않습니다. 약 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 대신 하나의 날짜 선택 도구를 사용할 수 있습니다. 이렇게하면 페이지로드가 빨라집니다.