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!
