Skip to main content
Inspiring
September 18, 2009
Question

load CF varibales into javascript array without outputing to source code

  • September 18, 2009
  • 2 replies
  • 1440 views

I have a javascript array for dynamic dropdowns - Automobile, makes,models, etc.

The javascript arrays are populated by by cf queries

Everythign works and functions fine - but it also loads the entire array (hundreds of lines of code) into the browser source code.

I would like to have the javascript arrays hidden from the browser source code by calling it:

<script language="JavaScript" type='text/javascript' src='../js/super.js'></script>

But when I code like this, the js file 'super.js' does not run the cf variables.

The only way I can get it to function right now is to save a cf file called 'super.cfm' and have it run the cf query, then list the javascript code under the query on this cf template.

THis works - but again, it causes the entire javascript code to be visible to the browser source code...

any ideas? - I am on cf 7

thanks in advance

This topic has been closed for replies.

2 replies

September 21, 2009

Did you try the obvious (at least to me)?

<script language="JavaScript" type='text/javascript' src='../js/super.cfm'></script>

As long as your cfm file produces valid JavaScript when it runs it will work...

BKBK
Community Expert
Community Expert
September 19, 2009

I would like to have the javascript arrays hidden from the browser source code by calling it:

<script language="JavaScript" type='text/javascript' src='../js/super.js'></script>

But when I code like this, the js file 'super.js' does not run the cf variables.

It's lucky it doesn't run. The browser downloads super.js. If you could execute CFML in the file, you would be able to cause havoc on the client's machine.

However, stay with the idea. You can still use it, as follows.

<!--- Create and save the JS file to disk beforehand --->

<cfsavecontent variable="superJS">

<cfoutput>

<!--- content of super.js goes in here, including any CFML code --->

</cfoutput>

</cfsavecontent>

<cffile action = "write"
    file = "#expandpath('../js/super.js')#"
    output = "#superJS#">

Inspiring
September 19, 2009

thanks for your idea

I ended up rethinking the whole process and realized that I only update my vehicle make/model list about once a week

So what I ended up doing was creating the the dynamic javascript arrays through cf - and rendered them in a browser, then took the browser source code (the fully rendered javascript arrays) and saved them as a static js file

My website uses this js file on every page, so I no longer need to call queries on every single page to populate the javascript arrays - they are already built and I am guessing cached by the browser  (browsers cache js files right?)

SO this runs more efficiently.

The only draw back is that when I add a new vehicle to the list in my database, I will need to manually do the same process of rendering the new js code, then cutting and pasting it into my static js file that gets called by all pages.

So it loses the realtime updates - but this only happened once a week anyway - and it only takes me five minutes to create the new file.

We'll see if I get sick of manually creating a new js file each week - probably, but this seems better than making the server re-render the code on each page.

Does this make sense? - would this be less overhead on the server than implimenting your concept?

thanks.

BKBK
Community Expert
Community Expert
September 19, 2009

What you say makes some sense. In fact, you could avoid the manual labour altogether.

You could store the Javascript snippet in onApplicationStart, using the suggestion I gave earlier. Something like,

<cfsavecontent variables="application.superJS">

</cfsavecontent>

<cffile action="write" output="#application.superJS#">

Then the script will be stored in the application scope, which is more or less equivalent to  caching.