在 CFFunction 中返回 JSON 并将其附加到层会导致错误

Question

我正在使用 qTip jQuery 插件来生成动态工具提示。我的 JS 中出现错误，并且我不确定其来源是 JSON 还是 JS。工具提示调用以下函数：（对所有这些代码感到抱歉，但这是必要的）

<cffunction 
name="fGameDetails"
access="remote"
returnType="any"
returnformat="JSON"
output="false"
hint="This grabs game details for the games.cfm page">
    <!---Argument, which is the game ID--->
<cfargument 
    name="gameID"
    type="numeric"
    required="true"
    hint="CFC will look for GameID and retrieve its details">
<!---Local var--->
<cfset var qGameDetails = "">
<!---Database query--->
<cfquery name="qGameDetails" datasource="#REQUEST.datasource#">
SELECT
    titles.titleName AS tName,
    titles.titleBrief AS tBrief,
    games.gameID,
    games.titleID,
    games.releaseDate AS rDate,
    genres.genreName AS gName,
    platforms.platformAbbr AS pAbbr,
    platforms.platformName AS pName,
    creviews.cReviewScore AS rScore,
    ratings.ratingName AS rName
FROM
    games
        Inner Join platforms ON platforms.platformID = games.platformID
        Inner Join titles ON titles.titleID = games.titleID
        Inner Join genres ON genres.genreID = games.genreID
        Inner Join creviews ON games.gameID = creviews.gameID
        Inner Join ratings ON ratings.ratingID = games.ratingID
WHERE 
    (games.gameID = #ARGUMENTS.gameID#);
</cfquery>
<cfreturn qGameDetails>
</cffunction>

该函数返回以下 JSON：

{
    "COLUMNS": [
        "TNAME",
        "TBRIEF",
        "GAMEID",
        "TITLEID",
        "RDATE",
        "GNAME",
        "PABBR",
        "PNAME",
        "RSCORE",
        "RNAME"
    ],
    "DATA": [
        [
            "Dark Void",
            "Ancient gods known as 'The Watchers,' once banished from our world by superhuman Adepts, have returned with a vengeance.",
            154,
            54,
            "January, 19 2010 00:00:00",
            "Action & Adventure",
            "PS3",
            "Playstation 3",
            3.3,
            "14 Anos"
        ]
    ]
}

我遇到的问题是每次我尝试将 JSON 附加到层 #catalog 时，我都会得到一个语法错误提示“缺少括号”。这是我正在使用的 JavaScript：

$(document).ready(function() 
{
    $('#catalog a[href]').each(function()
    {
        $(this).qtip( {
            content: {
            url: '/gamezilla/resources/components/viewgames.cfc?method=fGameDetails',
            data: { gameID: $(this).attr('href').match(/gameID=([0-9]+)$/)[1] },
            method: 'get'
        },
        api: {
            beforeContentUpdate: function(content) {
            var json = eval('(' + content + ')');
            content = $('<div />').append(
                $('<h1 />', {
                    html: json.TNAME
                }));
            return content;
            }
        },
        style: {
            width: 300,
            height: 300,
            padding: 0,
            name: 'light',
            tip: {
                corner: 'leftMiddle',
                size: {
                    x: 40,
                    y : 40
                }
            }
        },
        position: {
            corner: {
                target: 'rightMiddle',
                tooltip: 'leftMiddle'
            }
        }
        });
    });
});

您知道我哪里出错了吗？我尝试了很多方法，几天都找不到问题所在。

非常感谢！

Answer 1

在“位置”括号关闭后，JavaScript 的底部有一个额外的括号。

Answer 2

对 beforeContentUpdate 函数的第一行（在 eval 之前）执行 console.log(arguments)，以确保内容 arg是你所期望的吗？

Answer 3

似乎 beforeContentUpdate 不起作用。所以我建议使用 onRender 回调：

$(document).ready(function () {
    $('#catalog a[href]').each(function () {
        var link = $(this);
        $(this).qtip({
            content: 'loading...',
            api: {
                onRender: function () {
                    var self = this;
                    $.ajax({
                        url: '/gamezilla/resources/components/viewgames.cfc?method=fGameDetails',
                        dataType: 'json',
                        data: { gameID: link.attr('href').match(/gameID=([0-9]+)$/)[1] },
                        success: function (data) {
                            self.updateContent(data.DATA[0][0]);
                        }
                    });
                }
            },
            style: {
                width: 300,
                height: 300,
                padding: 0,
                name: 'light',
                tip: {
                    corner: 'leftMiddle',
                    size: {
                        x: 40,
                        y: 40
                    }
                }
            },
            position: {
                corner: {
                    target: 'rightMiddle',
                    tooltip: 'leftMiddle'
                }
            }
        });
    });
});

Answer 4

将 var json = eval('(' + content + ')'); 更改为 var json = eval(content);
和 html: json.TNAME 到 html: json.COLUMNS.TNAME

Answer 5

事实证明，是 ColdFusion 调试器导致 ajax 变得很奇怪。我很久以前就发现了这个问题，但现在才重新审视这个问题。遇到这种性质的错误时应该做的第一件事是关闭 CF 调试器以检查它是否导致问题。