Die Rückgabe von JSON in CFFUction und das Anhängen an Schicht verursacht einen Fehler

Question

Ich verwende das QTIP JQuery -Plugin, um ein dynamisches Tooltip zu generieren. Ich bekomme einen Fehler in meinem JS und bin mir nicht sicher, ob seine Quelle der JSON oder der JS ist. Der Tooltip ruft die folgende Funktion auf: (Entschuldigung für all diesen Code, aber es ist notwendig)

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

Diese Funktion gibt den folgenden JSON zurück:

{
    "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"
        ]
    ]
}

Das Problem, das ich habe, ist, dass ich jedes Mal, wenn ich versuche, den JSON an die Ebene #Catalog anzuhängen. Ich erhalte einen Syntaxfehler mit der Aufschrift "fehlende Klammern". Dies ist das JavaScript, das ich verwende:

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

Irgendwelche Ideen, bei denen ich falsch gehe? Ich habe mehrere Tage lang viele Dinge ausprobiert und kann das Problem nicht finden.

Danke vielmals!

Answer 1

Wie sich herausstellt, ist es der Coldfusion -Debugger, der den Ajax veranlasst, alles seltsam zu werden. Ich habe das schon vor langer Zeit herausgefunden, aber nur noch einmal das Problem erneut besucht. Das erste, was man bei der Begegnung mit einem Fehler dieser Art tun sollte, ist, den CF-Debugger zu schließen, um zu überprüfen, ob es das Problem verursacht.

Answer 2

Am unteren Rand Ihres JavaScripts befindet sich eine zusätzliche Klammer, nachdem die "Position" -Kracket geschlossen ist.

Answer 3

Mach a console.log(arguments) für die erste Zeile der beforeContentUpdate Funktion (vor dem eval), um sicherzustellen, dass der Inhalt arg, was Sie erwarten, zu sein?

Answer 4

Es scheint, dass beforeContentUpdate funktioniert nicht. Also würde ich empfehlen, zu verwenden onRender zurückrufen:

$(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 5

Rückgeld var json = eval('(' + content + ')'); zu var json = eval(content);und html: json.TNAME zu html: json.COLUMNS.TNAME