Devolver JSON en cffunction y agregarlo a la capa está causando un error
-
24-10-2019 - |
Pregunta
Estoy usando el complemento QTIP JQuery para generar una información sobre herramientas dinámicas. Recibo un error en mi JS, y no estoy seguro de si su fuente es el JSON o el JS. La información sobre herramientas llama a la siguiente función: (Perdón por todo este código, pero es necesario)
<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>
Esta función devuelve el siguiente 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"
]
]
}
El problema que tengo es cada vez que trato de agregar el JSON a la capa #catalog, obtengo un error de sintaxis que dice "falta entre paréntesis". Este es el JavaScript que estoy usando:
$(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'
}
}
});
});
});
¿Alguna idea de donde me equivoco? Probé muchas cosas durante varios días y no puedo encontrar el problema.
¡Muchas gracias!
Solución 5
Resulta que es el depurador de Coldfusion que hace que el Ajax se vuelva extraño. Descubrí esto hace mucho tiempo, pero ahora solo revisé el problema ahora. Lo primero que uno debe hacer al encontrar un error de esta naturaleza es el cierre del depurador CF para verificar si está causando el problema.
Otros consejos
Hay un soporte adicional en la parte inferior de su JavaScript, después de que se cierre el soporte de "posición".
Hacer un console.log(arguments)
para la primera línea del beforeContentUpdate
función (antes del eval
), para asegurarse de que el contenido arg sea lo que esperas que sea?
Parece que beforeContentUpdate
no está trabajando. Entonces sugeriría usar onRender
llamar de vuelta:
$(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'
}
}
});
});
});
cambio var json = eval('(' + content + ')');
a var json = eval(content);
y html: json.TNAME
a html: json.COLUMNS.TNAME