Using jquery ajax json format, How do you output a query from a .cfm page to the calling html page?

Question

I have successfully done tutorials that return a single string and a cfdump. But I need help on the syntax returning a query with a list of items.

Also a semi repost since it looks like my last question died out on responses.

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

I currently am getting an error.

SyntaxError: JSON.parse: unexpected character.

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>

test.cfm output looks like

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

learncf_jquery.cfc (code from another tutorial)

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

@Ravia, says "Vote Up requires 15 reputation" sorry bout that — isurfbecause
– isurfbecause, Commented Feb 17, 2012 at 21:00

Abhisek Das · Accepted Answer · 2012-02-10 11:38:23Z

1

I have tested your code in my local box and it is working fine, no problem with the code. The only problem in your case may be that you have enabled your coldfusion debugging output which may hamper your json format. Add this code: <cfsetting ShowDebugOutput = "false"/> in the top of the page that generates the json response(in you case test.cfm), to disable the coldfusion debugger. Test and let me know what you find. For more info visit the following URL. http://www.mindfiresolutions.com/While-working-with-AJAX-ColdFusion-Debugging-may-break-your-Ajax-calls-1477.php

Otherwise, in your response page there must be some other unwanted string which is hampering the json response

edited Feb 10, 2012 at 11:38

answered Feb 10, 2012 at 11:26

Abhisek Das

2061 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

isurfbecause Over a year ago

Thank you so much @abhisek it has taken me a week to find such a simple answer!

user400654 · Accepted Answer · 2012-02-09 22:58:32Z

0

Try adding this code:

<cfcontent type="application/json" reset="true"><cfoutput>#SerializeJSON(getItems)#</cfoutput><cfabort>

This will clear the request content and set the proper headers before outputting json, and end the request immediately after.

answered Feb 9, 2012 at 22:58

user400654

95.1k16 gold badges168 silver badges188 bronze badges

6 Comments

isurfbecause Over a year ago

Now I am getting SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data

user400654 Over a year ago

hmm..... remove the abort, but that shouldn't have caused an issue that I know of.

isurfbecause Over a year ago

same thing with <cfabort> removed

isurfbecause Over a year ago

That's my output on test.cfm. The <body> <html> shows up now

{"COLUMNS":["TEAM"],"DATA":[["Dallas Cowboys"],["NY Giants"],["Philadelphia Eagles"],["Washington Redskins"]]}      </body> </html>

user400654 Over a year ago

the cfcontent should be preventing anything from showing up before the json... I'm not sure why it isn't, or if the browser is adding that automatically. What is jQuery giving you now? still parseerror?

|

Collectives™ on Stack Overflow

Using jquery ajax json format, How do you output a query from a .cfm page to the calling html page?

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related