Making ColdFusion vars available to javascript functions

Question

I'm trying to implement some Bootstrap widgets with a ColdFusion site to make a dashboard style page for an intranet application. Being a JS newbie, I've figured out some of the simpler ones, but a couple are over my head.

** mainpage.cfm**
<insert all css links here>
<cfinclude template="myQueries.cfm"> **gets the data**

Body of Page here
<h4 class="value"><span>215</span><span>$</span></h4> **this span grabs the data from the .js file

<!--LOADING SCRIPTS FOR PAGE-->
<script src="js/main.js"></script>
<script src="js/index.js"></script>

From what I can tell is the '215' is a default if the span data is not returned.

And the code snippet from the index.js file:

$(function () {

//BEGIN COUNTER FOR SUMMARY BOX
counterNum($(".profit h4 span:first-child"), 189, 112, 1, 30); ** these are just included sample data
counterNum($(".income h4 span:first-child"), 636, 812, 1, 50);
counterNum($(".task h4 span:first-child"), 103, 155 , 1, 100);
counterNum($(".visit h4 span:first-child"), 310, 376, 1, 500);

function counterNum(obj, start, end, step, duration) {
    $(obj).html(start);
    setInterval(function(){
        var val = Number($(obj).html());
        if (val < end) {
            $(obj).html(val+step);
        } else {
            clearInterval();
        }
    },duration);
}
//END COUNTER FOR SUMMARY BOX
});

I have CF vars from my cfqueries to pass to each of the 4 parameters for each line.

I have tried other solutions, such as to cfinclude the index.js instead of and also tried just to rename it to a .cfm and cfinclude it.

I thought the best way was just to set my cfvars to match the required ls vars, but I can not get the syntax right for each of 4 levels of the 4 parms.

I have a lot of this type of integration to do and want to get it right the first time before doing the whole site, especially concerning the best way to integrate CF with JS. Any Best-Way advice would be appreciated.

Making some headway. I thinks its a matter of getting the loading order right. I renamed the index.js to .cfm and stuck my cfqueries in the very top of that. Now I can grad the cfvars for those widgets, but I lost them on the mainpage.cfm - since I moved the queries off it. Index.cfm has load at the bottom - so of course the queries haven't run when mainpage needs them. So, best way to have the cfvars available - without having the quires run multiple times? — Kevin
– Kevin, Commented Jan 30, 2015 at 19:16

Mike · Accepted Answer · 2015-01-30 21:58:39Z

1

This is actually a fairly common question, and a good understanding of the relationship between JS and CFML can help. Useful info here: http://blog.adamcameron.me/2012/10/the-coldfusion-requestresponse-process.html.

When I have query data I want to use in JS, I use Ajax to call a function in a CFC. This gets me an actual JS Object that I can use.

edited Jan 30, 2015 at 21:58

answered Jan 30, 2015 at 20:15

Mike

631 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Over a year ago

Thanks for the link - good read. I think its a proper syntax issue now. something like this :

Collectives™ on Stack Overflow

Making ColdFusion vars available to javascript functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related