0

I'm using the qTip jQuery plugin to generate a dynamic tooltip. I'm getting an error in my JS, and I'm unsure if its source is the JSON or the JS. The tooltip calls the following function: (sorry about all this code, but it's necessary)

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

This function returns the following 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"
        ]
    ]
}

The problem I'm having is every time I try to append the JSON to the layer #catalog, I get a syntax error that says "missing parenthetical." This is the JavaScript I'm using: 

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

Any ideas where I'm going wrong? I tried many things for several days and I can't find the issue.

Many thanks!

4

5 回答 5

1

It seems that beforeContentUpdate is not working. So I would suggest to use onRender callback:

$(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'
                }
            }
        });
    });
});
于 2010-07-05T14:02:40.753 回答
1

更改var json = eval('(' + content + ')');为var json = eval(content); _ html: json.TNAME_html: json.COLUMNS.TNAME

于 2010-07-06T06:03:14.847 回答
1

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

于 2010-07-04T00:51:14.297 回答
1

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

于 2010-06-07T18:08:17.697 回答
0

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

于 2010-11-11T11:41:22.637 回答