How to include external javascript file containing coldfusion code?

Question

I have several coldfusion files that use the exact same javascript code. I want to separate javascript from a .js file and include it in each of the files so that I don't have to repeat everything several times. So, I separated the javascript code into a file called "myPage.js", and in the "myPage.cfm" I included the script tag -

<script language="javascript" src="myPage.js"></script> 

The problem is that coldfusion code is distributed among javascript that enters values ​​using <cfoutput> , etc., and it no longer translates correctly, probably because it tries to read it as pure javascript. Is there a way to have an external js file, but point out that I want it to use coldfusion to interpret it?

One workaround I found was to include javascript in a coldfusion file instead of a javascript file called "myPageJavascript.cfm" that surrounds all javascript code in the <script type="text/javascript"> , and then use cfinclude to include this javascript on all pages. This works great, but it doesn’t seem intuitive to me, like including a js file ... What is the standard practice for such situations? Is there a way to implement this as an external js file, or should I just stick with the coldfusion template file?

Answer 1

Other answers are more elegant and efficient, but the simple way out is to change the file extension from .js to .cfm as such:

 <script language="javascript" src="myPage.cfm?id=#createUuid()#"></script> 

createUuid() exists to prevent caching, suggesting that the output of the file will be different, most likely based on variables from the session scope. The client loads this as JavaScript, and the server processes it as ColdFusion. You can do the same with style lists.

Now, if your JavaScript depends on the values ​​from the calling page, you can pass them to the URL:

 <script language="javascript" src="myPage.cfm?name1=value1&name2=value2"></script> 

In this situation, it can actually use caching when passing the same URL parameters.

In general, this approach can be a lot less effortful than refactoring the code to keep the .js file "clean", while outputting the variables to the <script/> block in advance.

Answer 2

I suggest you create a script block before including js that contains all the variables that will be used inside the js include file. In your case, move those cfoutput variables that you put in the js file into the main file

  <script type='text/javascript'> var sourceName = <cfoutput>#Application.name#</cfoutput> </script> <script src="js/myPage.js" type="text/javascript"/> 

In myPage.js, you can use the sourceName variable, which has the value actall from the coldfusion variable. thereby helping you separate the coldfusion code and the js code.

If you have many variables to move around, consider creating an object type variable and add all these variables to it.

NOTE. Adding js with a script tag will help it cache and improve page performance. Therefore, do not load the js file in the cfm file

Answer 3

It would be more efficient if you moved the ColdFusion code back to where you got it from, where you would use it to set some JavaScript variables, and leave only pure JavaScript, which then will use these variables in external JavaScript files. These would be the simplest solutions. Something more advanced would be to define functions in your external JavaScript files that will be called from your script tags in HTML format created by ColdFusion.

Answer 4

At first I liked @Orangepips to answer @Anooj - this is the simplicity of future maintenance, requiring a separate Javascript block every time you include <script> in your CFMs.

After a few minutes of thinking about this, however, this is easily eliminated by combining the two answers. This gives you modularity for the convenience of today's development and the future service you are looking for - PLUS as the best practice gives you isolation and caching of static Javascript to reduce request size and CF response speed.

Basically you have to create a CF-based façade that you will include or invoke every time you want to use Javascript. In my example, I made the facade a function called that you can pass JS parameters to (as @Orangepips pointed out) to precisely control which vars are passed to JS.

(As an aside, as a best practice, I try to put all the embedded JS in a variable and then forward them to CFHEADER to assure it of the page title.)

dosomething.js

 <script type='text/javascript'> <!-- assert vars were passed in --> if ( source == undefined ) alert("Developer error: source not defined."); return; } if ( urlpath == undefined ) alert("Developer error: urlpath not defined."); return; } <!-- do some js stuff ---> alert('source: ' + source + ", urlpath: " + urlpath ); </script> 

udf.cfm:

 <cffunction name="doSomething" output="true" returntype="void"> <cfargument name="source" required="true" /> <cfargument name="urlpath" required="true" /> <cfsavecontent variable="header"> <script type="text/javascript"> <!-- var init --> <cfoutput> var source = '#arguments.source#'; var urlpath = '#arguments.urlpath#'; </cfoutput> </script> <script language="JavaScript" type="text/javascript" src="dosomething.js"></script> </cfsavecontent> <cfhtmlhead text="#header#"> </cffunction> 

application.cfm

 <cfinclude template="udf.cfm"> 

view1.cfm:

 <cfoutput>#doSomething("view 1", "http://myurl/view1")#</cfoutput> 

view2.cfm:

 <cfoutput>#doSomething("view 2", "http://myurl/view2")#</cfoutput> 

Any future changes become easier when you disable the code (JS is separate from the JS-var defining the facade, separated from the individual views that invoke it). For example. when you add a variable, you can make it backward compatible so that all existing views continue to work.

udf.cfm:

 <cfargument name="newVar" required="false" default="" /> <cfif len(arguments.newVar)> var newVar = "#arguments.newVar#"; </cfif> 

dosomething.js changes:

 // keep JS backwards compatible if ( newVar != undefined) { // new var was passed in, do something with it } // else, not passed in 

Answer 5

In order to determine what came from the server and for the CF toScript function to correctly display variables, including structures and arrays, I use this method:

 <script> var cf = {}; <cfscript> writeOutput(toScript(application.applicationname,'cf.app')); writeOutput(toScript(cgi.remote_addr,'cf.url')); </cfscript> </script> 

renders:

 <script> var cf = {}; cf.app="Lucee";cf.url="149.79.80.135"; </script> 

and now in your external .js you just use cf.app, cf.url ... and so on.

Sometimes it is very convenient to pass the URL structure to get or the FORM structure in the message.