2012-06-15 100 views
3

我有一個非常簡單的頁面有cfgrid記錄集。當你點擊這一行時,我正在向cfdiv發送唯一的id,並用jqueryui datepicker顯示一個頁面。但是,當我點擊一行datepicker不起作用。我用Google搜索了一下,並找不到原因。這裏是我的代碼,其中CFGRID和CFDIV是:jQuery datepicker不能與cfdiv

<html> 
<head> 
<title>Submit Roomate Available</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<!---<script src="../assets/js/jQuery126-min.js""></script>---> 
<script src="../assets/js/jquery-1.7.2.min.js""></script> 
<script src="../assets/js/jquery-ui-1.8.21.custom.min.js""></script> 

<link href="../assets/css/flick/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css"> 

</head> 




<cfquery name="findrec" datasource="#datasourcename#"> 
    SELECT * 
     FROM students 
     WHERE class = 'rmavail' 
    order by last 
</cfquery> 
<cflayout type="accordion" width="677"> 
    <cflayoutarea title="Listings"> 
     <cfform> 
     <cfgrid name="listings" 
       width="677" 
       height="200" 
       format="html" 
       query="findrec"> 

       <cfgridcolumn name="listingID" header="Listing ID"/> 
       <cfgridcolumn name="first" header="First Name"/> 
       <cfgridcolumn name="last" header="Last Name"/> 
       <cfgridcolumn name="dateListed" header="Date Listed"/> 
       <cfgridcolumn name="email" header="Email"/> 
       <cfgridcolumn name="active" header="Active"/> 

     </cfgrid> 
     </cfform> 
    </cflayoutarea> 

</cflayout> 

<cfdiv bind="url:admin_rma.cfm?listingid={listings.listingID}&func=Edit"/> 

</body> 

這是頁面的加載CFDIV(admin_rma.cfm) - 這是那裏的日期選擇器坐,希望我能得到工作。我已經把每個放置jQuery庫的位置組合在一起,這只是其中的一種組合...

<script> 
$(function() { 
    $("#datepicker").datepicker({ maxDate: "+1m +1w" }); 
}); 
</script> 

<table cellpadding="0" cellspacing="0" width="698" align="center"> 
    <tr align="left" class="formheaders"> 
     <td> 
      <font color="red">*</font>Date Available</span> (mm/dd/yyyy) <br> 
      <input id="datepicker" type="text"> 
     </td> 
    </tr> 
</table> 
+0

因爲你需要先初始化它? – Anonymous

+0

我會考慮嘗試一個ExtJS日期選擇器 - 將使用基於ExtJS的ColdFusion的Ajax實現。 –

回答

0

使用firebug,確保正在加載jQuery。 如果你使用jQuery UI,你可能不想使用cflayout type =「accordion」。

1

這是因爲在html內容呈現在cfdiv標記之前執行javascript。嘗試在調用datepicker之前使用setTimeout函數進行一些延遲,它應該可以工作。嘗試下面

<script> 
setTimeout(function() { 
    $("#datepicker").datepicker({ maxDate: "+1m +1w" }); 
},500); 
</script> 
<table cellpadding="0" cellspacing="0" width="698" align="center"> 
    <tr align="left" class="formheaders"> 
     <td> 
      <font color="red">*</font>Date Available</span> (mm/dd/yyyy) <br> 
      <input id="datepicker" type="text"> 
     </td> 
    </tr> 
</table> 

在這種情況下,我給500 milisecond的延遲創建日期選擇對象,以便在HTML中的上下文已經呈現一定的輸入字段之前。 PS:這是不正確的解決方案,因爲根據瀏覽器功能和html內容的大小,將html內容加載到cfdiv可能需要超過500 ms。這只是爲了證明在加載之前調用的datepicker()函數。

希望得到這個幫助。

相關問題