Voici une page que j'ai travaillée pour un test. Il y a des commentaires dans le code pour aider à expliquer ce qui se passe. Deux lignes clés sont l'étiquette <cfajaxproxy>
et jd.getData();
est mon appel AJAX à CF.
<cfscript>
variables.folders = {"client":["Favorites","Not Used"],"org":["2012","2011"],"public":["New","Old"]};
</cfscript>
<cfajaxproxy cfc="cfc.jsondata" jsclassname="emaildata" />
<!DOCTYPE html>
<html>
<head>
<title>DevJSON</title>
<script src="js/jquery.1.7.2.js" type="text/javascript" language="JavaScript"></script>
<script src="js/handlebars.js" type="text/javascript" language="JavaScript"></script>
<link rel="stylesheet" href="css/json.css" type="text/css"/>
<script type="text/javascript">
<!--- toScript will output CF vars as js vars --->
<cfoutput>
var #toScript(variables.folders, 'folders')#;
var #toScript(cgi.http_host & '/data/emaildata.json','jsonPath')#;
</cfoutput>
var jd = new emaildata();
// setup my js object from cfajaxproxy above
var buildGrid = function(dataObj){
var menus;
var source = $('#grid').html();
var template = Handlebars.compile(source);
$("#mainContent").hide();
$("#mainContent").children().remove();
$("#mainContent").append(template(dataObj));
$("#mainContent").fadeIn('slow');
}
// Error handler for the asynchronous functions.
var badJson = function(statusCode, statusMsg){
alert('Status: ' + statusCode + '<br /><br /> ' + statusMsg);
}
// output data
var buildmenu = function(){
$.each(folders, function(fkey,fval) {
if(this.indexOf() < 1){
$('li[data-type="' + fkey + '"] > div').append('<ul class="' + fkey + '"></ul>');
}
$.each(fval, function(dkey, dval){
$('[class="' + fkey + '"]').append('<li id="' + fkey + '">' + dval + '</li>');
});
});
}
$(document).ready(function(){
buildmenu();
$('.directory > ul > li').click(function() {
//set callback, errorhandler and then call the getData function in my CFC
jd.setCallbackHandler(buildGrid);
jd.setErrorHandler(badJson);
jd.getData(this.id);
$(".directory > ul > li").removeClass("highlight");
$(this).addClass('highlight');
});
$("#mainContent").css('display','none');
$('li[data-type]').css('cursor','pointer');
});
</script>
<!--- Setup handlebars template --->
<script id="grid" type="text/x-handlebars-template">
<div class="gridDetail">
{{#each DATA}}
<div class="row">
{{#each this}}
<span class="cell">
{{.}}
</span>
{{/each}}
</div>
{{/each}}
</div>
</script>
</head>
Désolé, mais cela ne va pas fonctionner. Vous pouvez utiliser CF pour générer des js dynamiques mais vous ne pouvez pas utiliser de code CF dans js comme ceci. Vous devez utiliser AJAX pour rappeler le serveur et renvoyer les résultats de la requête à votre code js. –
Pour vous aider à comprendre pourquoi cela ne fonctionne pas, jetez un oeil à la source de la page générée. Vous allez devoir vous pencher sur les appels cfcs et ajax distants pour que celui-ci fonctionne. – Busches
Voici un lien vers les fonctions ColdFusion AJAX. Lisez quelques exemples et vous verrez comment utiliser js, AJAX et CF pour accomplir ce que vous voulez. [Fonctions ColdFusion AJAX] (http://help.adobe.com/en_US/ColdFusion/10.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-7ff4.html) –