Возвращение JSON в CFFunction и добавление его в слой вызывает ошибку

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

Оказывается, это отладчик ColdFusion, заставляющий Ajax работать очень странно. Я узнал об этом давным-давно, но только пересмотрел проблему сейчас. Первое, что нужно сделать при обнаружении ошибки такого рода, - отключить отладчик CF, чтобы проверить, не вызывает ли он проблему.

Answer 2

Менять var json = eval('(' + content + ')'); в var json = eval(content);а также html: json.TNAME в html: json.COLUMNS.TNAME

Answer 3

Сделать console.log(arguments) для первой строки beforeContentUpdate функция (до eval), чтобы убедиться, что содержание arg соответствует ожиданиям?

Answer 4

Есть дополнительная скобка внизу вашего javascript, после того, как скобка "position" закрыта.

Answer 5

Кажется, что 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'
                }
            }
        });
    });
});