1

請求書に似た ColdFusion 10 フォームを作成しています。3 つの列が含まれています。

最初の列は、利用可能なすべての製品のサブセットを選択するためのフィルターです。これには、製品カテゴリのクエリから構築された cfselect が含まれています。

2 番目の列は製品そのものです。これには、製品リストを含むテーブルにバインドされた cfselect が含まれており、一致するカテゴリの製品のみが表示されます。

3 番目の列は製品価格です。これには、同じテーブル内の製品価格にバインドされた cfdiv が含まれています。

選択したアイテムの合計価格 (合計) を計算する方法を探しています。私は特に「何かが変わった」トリガーを探しています。

私が見る解決策：

  • 各アイテムの価格に応じて、合計が別の BIND になります。単純なJSで実行できたとしても、これはサーバー側で実行されるため、少し醜いです。
  • cfselect で onChange を使用します。その場合、合計が計算される前に価格 BIND が実行されたことを確認するにはどうすればよいですか?
  • cfselect で onChange を使用し、XMLHttpRequest を使用してそのスクリプトで価格を直接照会します (つまり、価格列の BIND を削除します)。これを行うためのコードをいくつか書きましたが、うまくいくようですが、それでも非同期リクエストに変更し、ブラウザに依存しない方法で戻り値をデコードする必要があります。これは必要以上に複雑に思えます。
  • cfdiv で (存在しない) onChange を使用します。これが最も簡単な方法ですが、そのフックは存在しません。
  • 3 列目の cfdiv の代わりに cfselect/cfinput を使用し、css をチートして div のように見せます。醜い。
  • 前と同じですが、非表示になり、既存の cfdiv を表示したままにします。おそらく現時点では最善の策ですが、すべてのクエリが 2 回実行されます。もっと良い方法があると確信しています。
  • タイマーを使用します。私はむしろそれを避けたいです。

私は何が欠けていますか？

ありがとう。

4

1 に答える 1

0

他の誰かを助けることができる場合に備えて、自分の質問に答えます。

私が見つけるのに苦労したことと、この例が説明するかもしれないこと

  • 単純な CF BIND に相当する大まかな jQuery
  • alert() だけでなく、ダウンロードしたデータを実際に処理する $.get() の例

$.get() は、jQuery を紹介するための推奨される方法ではありません。

これはおそらく「プロ」を恐怖で叫ばせるでしょう。コピーアンドペースト コードと見なすべきではなく、それを行う方法を考え出すためのヒントにすぎません。

実際には私の作業バージョンから大幅に編集されているため、ダミーのタイプミスが含まれている可能性があります。

OK、免責事項は十分です。

function dollarize (price) {
    // unrelated code - just ensure that the price is always displayed with two decimals
}

function downloadPrice(url, DOM_Item_ID) {
    $.get( url,
           function(data,status){           // keep in mind that this function is called ASYNCHRONOUSLY
                //alert(data);  // typical data received, for a $1 item:  <wddxPacket version='1.0'><header/><data><string>1</string></data></wddxPacket>
                var payload = $(data).find('string').text();
                $('##' + DOM_Item_ID).text('$' + dollarize(parseFloat(payload)));   <!--- normally a single # - doubled since in a <cfoutput> --->
                UpdateTotalPrice();
          },
          "xml");
}

function UpdateTotalPrice() {
    var price = 0;
    for(var e=1;e<=#MAX_NUMBER_ITEM#;e++)
    {
        var node = document.getElementById("Item_"+e);
        var ID = node.selectedIndex;
        if(ID != 0) {
            prix += parseFloat(document.getElementById("Price_"+e).childNodes[0].nodeValue.substring(1));       // substring(1): removes the $ added above
        }
    }
    document.getElementById('TotalPrice').childNodes[0].nodeValue = '$' + dollarize(prix);
}

function onChangeItem(e) {
    var ID = document.getElementById("Item_"+e).value;
    downloadPrice("#application.CFC_PATH#gestion-equipements.cfc?method=trouvePrixStandardEquipement&ID="+ID,
            "Price_"+e);
}

2列目:

<cfloop from="1" to="#MAX_NUMBER_ITEM#" index="e">
    ...
        <cfselect Name="Item_#e#" ID="Item_#e#" bind="........." bindonload="yes" queryPosition="below" onChange="onChangeItem(#e#)"><option value="0">--</cfselect>

3 列目の各価格項目:

<cfdiv ID="Price_#e#" align="right">$0.00</cfdiv>       <!--- content of the div (i.e. $0.00) must NOT be empty, otherwise childNodes[0] above will fail --->

合計金額：

<cfdiv ID="TotalPrice">$0.00</cfdiv>
于 2013-08-03T02:33:31.900 に答える