Question

我正在构建一个类似于发票的ColdFusion 10表单。它包含三列。

第一列是用于选择所有可用产品子集的过滤器：它包含根据产品类别查询构建的cfselect。

第二列是产品本身：它包含与包含产品列表的表绑定的cfselect，仅显示匹配类别中的产品。

第三列是产品价格：它包含与产品价格相关的cfdiv，在同一张表中。

我正在寻找一种计算所选项目总价（总和）的方法。我特别想找到“有所改变”的触发器。

我看到的解决方案：

总数是另一个BIND，具体取决于每个项目的价格。有点难看，因为这可以在服务器端完成，即使一个简单的JS也可以做到。
在cfselect上使用onChange。在这种情况下，如何确保在计算总额之前已经执行了BIND价格？
在cfselect上使用onChange，并使用XMLHttpRequest直接查询该脚本中的价格（即删除价格列上的BIND）。我编写了一些代码来执行此操作，它似乎可以工作，但我仍然需要将其更改为异步请求，并以独立于浏览器的方式解码返回。这似乎比需要的更复杂。
在cfdiv上使用（不存在的）onChange。这将是最简单的......但是该钩子不存在。
在第三列中使用cfselect / cfinput而不是cfdiv，并使用css作弊使其看起来像div。难看。
与之前相同，但隐藏，并保持现有的cfdiv可见。可能是现在最好的选择，但所有查询都将执行两次。我确信有更好的方法。
使用计时器。我宁愿避免这种情况。

我错过了什么？

感谢。

Answer 1

回答我自己的问题，以防它可以帮助别人。

我找不到什么，这个例子可以说明

粗略的jQuery相当于简单的CF BIND
实际上对下载的数据进行处理的$ .get（）示例，而不仅仅是alert（）它

$。get（）绝对不是推荐引入jQuery的方法。

这可能会让“专业人士”大惊小怪。它不应该被认为是复制粘贴代码，只是暗示要找到一种方法。

它实际上已经从我的工作版本进行了强烈编辑，因此它可能包含虚假拼写错误。

好的，有足够的免责声明。

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);
}

第二栏：

<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>

在BIND之后调用JS函数？

1 个答案: