3

cfgrid レコードセットを持つ非常に単純なページがあります。行をクリックすると、一意の ID が cfdiv に送信され、jqueryui 日付ピッカーを含むページが表示されます。ただし、行をクリックすると、日付ピッカーが機能しません。私はググってググったのですが、理由がわかりません。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) です。これは、datepicker が置かれている場所であり、できれば作業を開始できます。jqueryライブラリを配置する場所のすべての組み合わせを結び付けましたが、これは組み合わせの1つにすぎません...

<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

これは、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>

この場合、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 に答える