How do you output a query from a .cfm page using jQuery AJAX in JSON format?

Question

I am trying to output a query from a .cfm page using jquery with json format. Can someone tell me what I am dong wrong?

Edit: Answer here

Edit: Just posted my cf

Answer 1

You can also have CF return the query from the CFC in json format: (this might be the same as putting the serialize function on it)

ie

<cffunction access="remote" name="SelectedSubCats" output="false" returntype="query" returnformat="json">
<cfargument name="catID" required="yes" type="numeric" default="-23" />
<cfquery name="SelectedSubCats" datasource="$$$" >
SELECT * FROM subcategory
WHERE <cfif Arguments.catID neq -23>topCatID = #Arguments.catID#</cfif>
ORDER BY subcat
</cfquery>
<cfreturn SelectedSubCats>
</cffunction>

Answer 2

./test.cfm:

   <cfinvoke 
   component="learncf_jquery" 
   method="getAllTeams" 
   returnVariable="getItems">
   </cfinvoke>
   <cfoutput>#SerializeJSON(getItems)#</cfoutput>

Here's some of my code that I've modified to match your example:

My HTML:

<table id="results" cellspacing="0" cellpadding="0">
</table>

And my javascript, which puts the query result into the table:

    $("#runQuery").click(function () {

        $.ajax({

            type: "GET",
            url: "./test.cfm",
            dataType: "json",
            success: function (resp, textStatus, jqXHR) {
                buildResultsTable(resp);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert(errorThrown); 
            }
        });

    });


    function buildResultsTable(resp)
    {
        var tmp_html = $("<tr />");
        var j = 0;

            $("#results").html(""); 

            for (var i = 0; i < resp["COLUMNS"].length; i++)
            {
                var tmp_th = $("<th />");   
                tmp_th.text(resp["COLUMNS"][i]);
                tmp_html.append(tmp_th);
            }
            $("#results").append(tmp_html);

            for (j = 0; j < resp["DATA"].length; j++)
            {
                tmp_html = $("<tr />");

                for (var i = 0; i < resp["DATA"][j].length; i++)
                {
                    var tmp_td = $("<td />");   
                    tmp_td.text(resp["DATA"][j][i]);
                    tmp_html.append(tmp_td);
                }
                $("#results").append(tmp_html);
            }

    }

Answer 3

Your test.cfm page needs to output getItems as JSON. Try adding this to test.cfm:

<cfoutput>
#SerializeJSON(getItems)#
</cfoutput>