Question

以下是我的反对意见：我正在尝试根据CFSelect框中的选择更改CFDIV的内容。

为此，我已将CFDiv绑定到CFC，并且我尝试从我在该CFC中执行的查询中返回两列; Alert_Status和Alert_Priority。将根据CFM页面中CFSelect框中的选择查询这些值。 Company_Name是从CFSelect框中的选择传递到CFC的值。一旦运行了CFC中的查询，我想在与选择框相同的CFM页面上的DIV中显示结果。

这是CFC：

    <!---First Slect Box --->
<cffunction name="getData" access="remote" returntype="query">
    <cfoutput>
    <!--- Function to get data from datasource --->
    <cfquery name="data" datasource="#datasource#">
    select company_name, customer_id
    from customer_table
    where status <> '0'
    order by company_name
    </cfquery>
    </cfoutput>

    <!--- Return results --->
    <cfreturn data>
</cffunction>

<cffunction name="getDetail" access="remote" returnType="string">
    <cfargument name="company_name" type="any" required="true">

    <!--- localize function variables --->
    <cfset var dataDetail = "">
    <cfoutput>
    <cfquery name="dataDetail" datasource="#datasource#">
        SELECT tax_rate
        FROM   customer_table
        <!--- adjust cfsqltype if needed --->
        WHERE company_name = <cfqueryparam value="#ARGUMENTS.company_name#" cfsqltype="cf_sql_varchar">
    </cfquery>
    </cfoutput>
    <cfreturn dataDetail.tax_rate>
</cffunction>

<cffunction name="getAlerts" access="remote" returnType="query">
    <cfargument name="company_name" type="any" required="true">

    <!--- localize function variables --->
    <cfset var alertDetail = "">
    <cfoutput>
    <cfquery name="getID" datasource="#datasource#">
        select customer_id
        from customer_table
        where company_name = <cfqueryparam value="#ARGUMENTS.company_name#" cfsqltype="cf_sql_varchar">
    </cfquery> 
    <cfquery name="alertDetail" datasource="#datasource#">
        SELECT *
        FROM   customer_alerts
        <!--- adjust cfsqltype if needed --->
        WHERE customer_id = <cfqueryparam value="#getID.customer_id#" cfsqltype="cf_sql_varchar"> AND alert_status = 'on'
    </cfquery>
    </cfoutput>


    <cfreturn alertDetail>
</cffunction>

我正在尝试在主页上的div中显示查询 AlertDetail 的查询结果。

以下是我的CFM页面中与此CFC相关的部分：

          <cfdiv name="test" id="test" type="text" bind="cfc:cfcs.taxdata.getAlerts({company_name})" bindonload="true" bindattribute="value" rows="2" cols="2" readonly="yes"></cfdiv>

非常感谢任何帮助。谢谢。 -Brian

Answer 1

让我们退一步。我看到你的目标，有时使用CFDiv只会使事情复杂化。我只想使用AJAX。我不确定你的意思是什么＆＃34;两列＆＃34;所以我发送给你的当前例子只显示了一个返回的函数。添加第二个将非常容易复制。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        // populate the dropdown
        $.ajax({
            type: "GET",
            url:"cfcs/taxdata.cfc?method=getData",
            dataType: "json",
            success: function (data) {
                $("#formSelect").html("");
                // may need tweeking depending on how you are outputting your query.
                $.each(data,function(i,obj)
                   {
                       var div_data="<option value="+obj+">"+obj+"</option>";
                       $(div_data).appendTo('#formSelect'); 
                   });  
            }
        });         
        // on change of dropdown value return the cfc data into the div
        $("#formSelect").change(function() {  
            var selectValue = $("#formSelect").val();
            $.ajax({
                type: "GET",
                url:"cfcs/taxdata.cfc?method=getAlerts",
                dataType: "json",
                data: { 
                    company_name: selectValue
                },
                success: function (data) {
                    $("#test").html(data);
                }
            });
        });
    </script>
</head>
<body>
    <form>
        <select id="formSelect">
        </select>
    </form>
    <div id="test"></div>
</body>

此外，下面是如何将多个结果添加到<div>

<!-- Use multiple AJAX calls to each function. Have them return in separate divs within the main div. -->

<div id="test">
    <div id="query1"></div>
    <div id="query2"></div>
    <div id="query3"></div>
    <!-- You can also do paragraph tags. JQuery only looks for the ID or class -->
    <p id="query4"></p>
</div>

Option Two

<!-- 
    In your ajax instead of using $("#test").html(data); you can use appentTo() for each AJAX call
-->

success: function (data) {
    $(data).appendTo('#test');
}

从CFC函数访问查询数据

1 个答案: