3

我有一个非常简单的页面，它有 cfgrid 记录集。当您单击该行时，我将向 cfdiv 发送唯一 id 并显示一个带有 jqueryui datepicker 的页面。但是，当我单击一行时，日期选择器不起作用。我用谷歌搜索和搜索，无法弄清楚为什么。这是我的 cfgrid 和 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>
4

2 回答 2

1

这是因为在 cfdiv 标记上呈现 html 内容之前执行了 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>

在这种情况下，我在创建 datepicker 对象之前延迟了 500 毫秒，以确保输入字段已经在 html 上下文中呈现。PS：这不是正确的解决方案，因为根据浏览器功能和 html 内容的大小，将 html 内容加载到 cfdiv 可能需要 500 多毫秒。这只是为了证明 datepicker() 函数在加载之前被调用。

希望这有帮助。

于 2012-12-01T07:25:10.117 回答
0

使用 firebug，确保正在加载 jQuery。如果您使用 jQuery UI，您可能不想使用 cflayout type="accordion"。

于 2012-06-15T15:16:46.207 回答