CODEWITHSUNDEEP
jqueryajaxcoldfusion
isurfbecause
isurfbecause

Reputation: 990

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

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

Edit: I currently am getting an error. 

SyntaxError: JSON.parse: unexpected character.

test.cfm output looks like

{"COLUMNS":["TEAM"],"DATA":[["Dallas Cowboys"],["NY Giants"],["Philadelphia Eagles"],["Washington Redskins"]]}

In my .html page I have

   <html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){ 

    $("#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);
            }

    }

    })
    </script>

</head>

<body>
    <input type="button" id="runQuery" value="Show Teams" />
    <input type="text" name="name">

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


</body>
</html>

In my test.cfm calling page I have 

   <cfinvoke 
   component="learncf_jquery" 
   method="getAllTeams" 
   returnVariable="getItems">
   </cfinvoke>

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

learncf_jquery.cfc

<cfcomponent name="jQueryExample" output="false">

<cffunction name="getAllPlayers" output="false" access="private" returntype="query">
    <cfset var qAllPlayers = queryNew('playerName, team') />

    <cfset queryAddRow(qAllPlayers, 40) />

    <!--- add 10 Giants players to the "database" --->
    <cfset querySetCell(qAllPlayers, 'playerName', 'Alford, Jay', 1) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 1) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Barden, Ramses', 2) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 2) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Beckum, Travis', 3) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 3) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Bernard, Rocky', 4) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 4) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Blackburn, Chase', 5) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 5) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Boss, Kevin', 6) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 6) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Bradshaw, Ahmad', 7) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 7) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Canty, Chris', 8) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 8) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Diehl, David', 9) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 9) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Feagles, Jeff', 10) />
    <cfset querySetCell(qAllPlayers, 'team', 'NY Giants', 10) />

    <!--- add 10 Cowboys players to the "database" --->
    <cfset querySetCell(qAllPlayers, 'playerName', 'Adams, Flozell', 11) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 11) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Austin, Miles', 12) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 12) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Brown, Courtney', 13) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 13) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Choice, Tashard', 14) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 14) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Colombo, Marc', 15) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 15) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Davis, Leonard', 16) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 16) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Jones, Felix', 17) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 17) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Kitna, Jon', 18) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 18) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Procter, Corey', 19) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 19) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Romo, Tony', 20) />
    <cfset querySetCell(qAllPlayers, 'team', 'Dallas Cowboys', 20) />

    <!--- add 10 Eagles players to the "database" --->
    <cfset querySetCell(qAllPlayers, 'playerName', 'Akers, David', 21) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 21) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Baskett, Hank', 22) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 22) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Booker, Lorenzo', 23) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 23) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Clemons, Chris', 24) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 24) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Demps, Quintin', 25) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 25) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Feeley, A.J.', 26) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 26) />

    <cfset querySetCell(qAllPlayers, 'playerName', 'Hobbs, Ellis', 27) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 27) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Jackson, DeSean', 28) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 28) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Klecko, Dan', 29) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 29) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'McNabb, Donovan', 30) />
    <cfset querySetCell(qAllPlayers, 'team', 'Philadelphia Eagles', 30) />

    <!--- add 10 Redskins players to the "database" --->
    <cfset querySetCell(qAllPlayers, 'playerName', 'Alexander, Lorenzo', 31) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 31) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Campbell, Jason', 32) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 32) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Clark, Devin', 33) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 33) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Cooley, Chris', 34) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 34) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Dixon, Antonio', 35) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 35) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Fletcher, London', 36) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 36) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Hackett, D.J.', 37) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 37) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Randle El, Antwaan', 38) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 38) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Smoot, Fred', 39) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 39) />
    <cfset querySetCell(qAllPlayers, 'playerName', 'Suisham, Shaun', 40) />
    <cfset querySetCell(qAllPlayers, 'team', 'Washington Redskins', 40) />

    <cfreturn qAllPlayers />
</cffunction>

<cffunction name="getAllTeams" access="remote" output="false" returntype="query">
    <cfset var allPlayers   = getAllPlayers() />
    <cfset var qGetAllTeams = "" />

    <cfquery name="qGetAllTeams" dbtype="query">
        SELECT DISTINCT team FROM allPlayers ORDER BY team
    </cfquery>

    <cfreturn qGetAllTeams />
</cffunction>

Upvotes: 0

Views: 3062

Answers (3)

illiquent
illiquent

Reputation: 171

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>

Upvotes: 0

Jake Feasel
Jake Feasel

Reputation: 16955

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

    }

Upvotes: 1

duncan
duncan

Reputation: 31912

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

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

Upvotes: 0

Related Questions