User Guide Cancel

JavaScriptFunctionsinColdFusion9Update1

Last updated on May 30, 2024 | Also applies to ColdFusion

ColdFusion

Open app

CFML Reference User Guide
ColdFusion functions
ColdFusion tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    1. cfchartdata
    2. cfchartseries
    3. cfchartset
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

The following are the Ajax JavaScript functions added in this release:

ColdFusion.Autosuggest.getAutosuggestObject

Description

Lets you access underlying YUI AutoComplete object thereby providing fine-grained control over the object, for example attaching an event.

Returns

The underlying AutoComplete object.

Function syntax

ColdFusion.Autosuggest.getAutosuggestObject (Id)

Parameters

Id: Name of the auto-suggest object.

Example

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<cfajaximport tags="cfinput-autosuggest">
<script>
var init = function()
{
autosuggestobj = ColdFusion.Autosuggest.getAutosuggestObject('state');
autosuggestobj.itemSelectEvent.subscribe(foo);
}
var foo = function(event,args)
{
var msg = "";
msg = msg + "Event: " + event + "\n\n";
msg = msg + "Selected Item: " + args[2] + "\n\n";
msg = msg + "Index: " + args[1]._nItemIndex + "\n\n";
alert(msg);
}
var getStates = function(){
return ["California","Connecticut","Colorado","Illinois","Alabama","Iowa","Utah",
"Alaska"];
}
</script>
</head>
<body>
<h3>Attaching an event handler to the autosuggest object</h3>
<cfform name="mycfform" method="post" >
State:<BR>
<cfinput
type="text"
name="state"
autosuggest="javascript:getStates({cfautosuggestvalue})"
autosuggestMinLength=1
autosuggestBindDelay=1>
<cfset ajaxOnLoad("init")>
</cfform>
</body>
</html>

ColdFusion.Layout.disableSourceBind

Description

Disables the source bind.

Function syntax

ColdFusion.Layout.disableSourceBind(Id)

Parameters

Id: Name of the layout area.

Usage

Assume that you are using Coldfusion.navigate to populate content into tab or accordion panels. You can have instances where content comes from the source bind call if the source attribute is defined for cflayoutarea (and is not from ColdFusion.navigate).In such instances, you might disable the source bind to get content using Coldfusion.navigate.

Example

layout.cfm uses the templates Tab1_Src.cfm, Tab2_Src.cfm, and Tab3_Src.cfm. If you run layout.cfm, you notice that clicking

navigate populates content of tab2_src.cfm instead of navigate.cfm
Disable Source bind ensures that the content of navigate.cfm is populated in tab2_src

Enable Source Bind and then clicking tab2_src would again populate the content of tab2_src
Tab1_Src.cfm

Tab2_Src.cfm

Tab3_Src.cfm

Tab4_Src.cfm__

layout.cfm

ColdFusion.Layout.enableSourceBind

Description

If disabled, enables the source bind.

Function syntax

ColdFusion.Layout.enableSourceBind(Id)

Parameters

Id: Name of the layout area.

Usage

See usage in ColdFusion.Layout.disableSourceBind.

Example

See example in ColdFusion.Layout.disableSourceBind.

ColdFusion.FileUpload.getSelectedFiles

Description

Returns an array of objects containing the filename and size of the files selected for upload. The file size is returned in bytes. The function also returns file upload status as YES|NO|Error.

Function syntax

ColdFusion.FileUpload.getSelectedFiles(Id)

Parameters

Id: Name of the cffileupload control.

Usage

In a real life scenario, you normally use the uploader with other controls. For example, a form with three fields: name, email, and uploader. Assume that you upload the files, but forget to click Submit or you select the files, submit the form, but forget to click Upload. You can use this function to inform the user that there are files that have been selected for upload and provide the following details:

FILENAME: Name of the file selected for upload.
SIZE: Size of the file in bytes.
STATUS: YES|NO|Error; YES indicates a successful upload, NO indicates that the upload is yet to occur, and Error indicates that an exception has occurred during the upload operation.

Example

The following example illustrates a scenario where the user clicks Submit and is informed about the files selected for upload:

<html>
<head>
<script language="javascript">
var formatNumber = function(num){
if(num < 1024) return num + " bytes";
if(num < (1024 * 1024)) return (num/1024).toFixed(2) + " KB";
if(num < (1024 * 1024 *1024)) return (num/(1024 * 1024)).toFixed(2) + " MB";
return (num/(1024 * 1024 * 1024)).toFixed(2) + " GB";
}
var getSelectedList = function(id){
var files = ColdFusion.FileUpload.getSelectedFiles(id);
var fileslist = "";
if(files.length)
fileslist = "You have selected The following files for upload: \n\n";
for(var i=0;i < files.length; i++){
fileslist = fileslist + files[i].FILENAME + " (" + formatNumber(files[i].SIZE) + ")"
if(i != files.length-1)
fileslist = fileslist + "\r\n";
}
if(files.length)
{
alert(fileslist);
}
}
</script>
</head>
<body>
<br>
<cfform name="frmUpload" method="POST">
First Name: <cfinput type="text" name="fname" value=""><br>
Last Name: <cfinput type="text" name="lname" value=""><br><br>
<cffileupload
url="uploadAll.cfm"
name="myuploader1"
hideUploadButton=false
onUploadComplete="foo"
/><br><br>
<cfinput type="button" name="submitForm2" value="Submit" onClick="getSelectedList('myuploader1')">
</cfform>
</body>
</html>

Coldfusion.fileUpload.setUrl

Description

Used to set URL for the fileupload control dynamically.

Returns

Nothing

Function syntax

ColdFusion.fileUpload.setUrl(id, url)

Parameters

Id: Name of upload control.
Url: URL can be an absolute URL, relative URL, or fully qualified URL.

Example

ColdFusion.grid.getSelectedRows

Description

Used to fetch data for the selected rows in the grid.

Returns

An array of objects that contains row data.

Function syntax

ColdFusion.grid.getSelectedRows(id)

Parameters

Id: Name of the grid defined using cfgrid.

Usage

See the example in ColdFusion.grid.clearSelectedRows.

Example

See the example in ColdFusion.grid.clearSelectedRows.

ColdFusion.grid.clearSelectedRows

Description

Used to clear the selected rows in the grid.

Returns

Nothing

Function syntax

ColdFusion.grid.clearSelectedRows(id)

Parameters

Id: Name of the grid defined using cfgrid.

Usage

See the following example.

Example

Employee.cfm

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<cfajaxproxy cfc="emp" jsclassname="emputils">
<script language="javascript">
var emp = new emputils();
var deleteAllSelectedRows = function(grid)
{
emp.setHTTPMethod("POST");
emp.deleteEmployees(getAllSelectedRows(grid,false));
ColdFusion.Grid.refresh(grid);
}
var getAllSelectedRows = function(grid,showalert)
{
obj = ColdFusion.Grid.getSelectedRows(grid);
jsonbj = ColdFusion.JSON.encode(obj);
if(showalert)
alert(jsonbj);
return obj;
}
var clearAllSelectedRows = function(grid)
{
ColdFusion.Grid.clearSelectedRows(grid);
}
</script>
</head>
<body>
<cfform>
<cfgrid
format="html"
name="empListing"
selectmode="edit"
bind="cfc:emp.getEmployees({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onchange="cfc:emp.editEmployees({cfgridaction},{cfgridrow},{cfgridchanged})"
autowidth="true"
multirowselect=true
delete="true"
insert="true"
title="Employee database"
pagesize="25"
>
<cfgridcolumn name="EMP_ID" header="EMP_ID" select="false" display="false">
<cfgridcolumn name="FIRSTNAME" header="First Name" select="true" />
<cfgridcolumn name="LASTNAME" header="Last Name" select="true" />
<cfgridcolumn name="DEPARTMENT" header="Department" select="true" />
<cfgridcolumn name="EMAIL" header="Email" select="true" />
</cfgrid>
<br>
<cfinput type="button" onClick="javascript:getAllSelectedRows('empListing',true)" name="getRows" value="Get Selected Rows">
<cfinput type="button" onClick="javascript:clearAllSelectedRows('empListing')" name="clearRows" value="Clear Selected Rows">
<cfinput type="button" onClick="javascript:deleteAllSelectedRows('empListing')" name="deleteRows" value="Delete Selected Rows">
</cfform>
</body>
</html>

Employee.cfc

<cfcomponent>
<cfscript>
empQuery = new query(name="emps", datasource="cfdocexamples");
remote any function getEmployees(page,pageSize,gridsortcolumn="EMP_ID",gridsortdirection="ASC",empName)
{
var orderBy = "EMP_ID";
var mysql = "SELECT Emp_ID, FirstName, LastName, EMail, Department, Email FROM Employees";
if(isdefined("arguments.empName") and trim(arguments.empName) neq ""){
mysql = mysql & " WHERE " & "firstname = '#arguments.empName#'";
}
if(arguments.gridsortcolumn eq ""){
mysql = mysql & " ORDER BY " & orderBy;
}
mysql = mysql & " " & gridsortdirection;
return QueryConvertForGrid(empQuery.execute(sql=mysql).getResult(), page, pageSize);
}
remote void function editEmployees(gridaction,gridrow,gridchanged)
{
switch(gridaction)
{
case "I":
{
var eFName = gridrow["FIRSTNAME"];
var eLNAme = gridrow["LASTNAME"];
var eDept = gridrow["DEPARTMENT"];
var eEmail = gridrow["EMAIL"];
var insertSql = "insert into Employees(FirstName,LastName,Department,Email) values (" & "'" & eFName & "', '" & eLName & "', '" & eDept & "', '" & eEmail & "')";
empQuery.execute(sql=insertSql);
break;
}
case "U":
{
var empId = gridrow["EMP_ID"];
var changedCol = structkeylist(gridchanged);
var updateSql = "UPDATE Employees SET " & changedCol & "='" & gridchanged[changedCol] & "' WHERE emp_id=" & empId;
empQuery.execute(sql=updateSql);
break;
}
case "D":
{
deleteEmployees(gridrow);
}
}
}
remote void function deleteEmployees(empdata)
{
var i = 1;
var emp = {};
if(isArray(empdata) and not ArrayIsEmpty(empdata)){
for(emp in empdata){
if(isStruct(emp) and structkeyexists(emp,"emp_id")){
empid = emp["emp_id"];
writelog("deleting " & empid);
//var deleteSql = "delete from Employees where emp_id=" & empid;
//empQuery.execute(sql=deleteSql);
}
}
}
}

</cfscript>
</cfcomponent>

In this example, setting multirowselect=true enables performing of batch operations on grid data, such as deleting multiple records.In the deleteemployees functions, two lines have been commented out to prevent accidental deletion of data (since it is a batch operation). To see deletion, uncomment the code.The form has a deleteAllSelectedRows button that illustrates how records can be deleted externally. That is, without using the delete button built in to the grid. The same approach can be used to perform other batch operations such as moving multiple files to another folder or batch updates.

Note: Set the httpMethod to POST on the Proxy object carefully to avoid "request URI too large" errors as shown in the deleteAllSelectedRows method in Employee.cfm.

ColdFusion.Map.show

Description

Shows the map if it is hidden.

Function syntax

ColdFusion.Map.show(Id)

Parameters

Id: Name of the map.

Example

ColdFusion.Map.hide

Description

If displayed, hides the map.

Function syntax

ColdFusion.Map.hide(Id)

Parameters

Id: Name of the map.

Example

See example in ColdFusion.Map.show

ColdFusion.Map.refresh

Description

Reloads the map.

Function syntax

ColdFusion.Map.refresh (Id)

Parameters

Id: Name of the map.

Usage

If the map is embedded within spry collapsible panels or divs that are hidden on display, that is the map container is displayed while the actual map is hidden, use this function to force the map to display.

Example

ColdFusion.Grid.getTopToolbar

Description

Gets the top toolbar that can be used to add a control, for example icon or button.

Function syntax

ColdFusion.getTopToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.getBottomToolbar

Description

Gets bottom toolbar that can be used to add a control, for example icon or button.

Function syntax

ColdFusion.Grid.getBottomToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.showTopToolbar

Description

Displays the top toolbar that can be used to add a control, for example icon or button.

Function syntax

ColdFusion.Grid.showTopToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.hideTopToolbar

Description

Hides the top toolbar that can be used to add a control, for example icon or button.

Function syntax

ColdFusion.Grid.hideTopToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.showBottomToolbar

Description

Shows bottom toolbar that can be used to add a control, for example icon or button.

Function syntax

ColdFusion.Grid.showBottomToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.hideBottomToolbar

Description

Hides the bottom toolbar that can be used to add a control, for example icon or button.

Function syntax

ColdFusion.Grid.hideBottomToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.refreshTopToolbar

Description

Refreshes the top toolbar that can be used to add a control, for example icon or button. This function internally calls the JavaScript function ColdFusion.Grid.showTopToolbar.

Function syntax

ColdFusion.Grid.refreshTopToolbar(Id)

Parameters

Id: Name of the grid.

Example

See example in ColdFusion.Grid.refreshBottomToolbar.

ColdFusion.Grid.refreshBottomToolbar

Description

Refreshes the bottom toolbar that can be used to add a control, for example icon or button. This function internally calls the JavaScript function ColdFusion.Grid.showBottomToolbar.

Function syntax

ColdFusion.Grid.refresheBottomToolbar(Id)

Parameters

Id: Name of the grid control.

Example

grid.cfc

<cfcomponent>
<cfscript>
remote any function getEmployees(page,pageSize,gridsortcolumn="EMP_ID",gridsortdirection="ASC"){
var startRow = (page-1)*pageSize;
var endRow = page*pageSize;

if(!isdefined("arguments.gridsortcolumn") or isdefined("arguments.gridsortcolumn") and trim(arguments.gridsortcolumn) eq "")
gridsortcolumn = "EMP_ID";
if(!isdefined("arguments.gridsortdirection") or isdefined("arguments.gridsortdirection") and arguments.gridsortdirection eq "")
gridsortdirection = "ASC";
var mysql = "SELECT Emp_ID, FirstName, EMail, Department FROM Employees";
if(isdefined("arguments.gridsortcolumn") and arguments.gridsortcolumn neq "")
mysql = mysql & " ORDER BY " & gridsortcolumn;
if(isdefined("arguments.gridsortdirection") and arguments.gridsortdirection neq "")
mysql = mysql & " " & gridsortdirection ;
rs1 = new query(name="team", datasource="cfdocexamples", sql=mysql).execute();
return QueryConvertForGrid(rs1.getResult(), page, pageSize);
}

remote any function editEmployees(gridaction,gridrow,gridchanged){
writelog("edit employee info");
}

</cfscript>
</cfcomponent>

grid.cfm

Get help faster and easier

New user?

JavaScriptFunctionsinColdFusion9Update1

ColdFusion.Autosuggest.getAutosuggestObject

Description

Returns

Function syntax

Parameters

Example

ColdFusion.Layout.disableSourceBind

Description

Function syntax

Parameters

Usage

Example

ColdFusion.Layout.enableSourceBind

Description

Function syntax

Parameters

Usage

Example

ColdFusion.FileUpload.getSelectedFiles

Description

Function syntax

Parameters

Usage

Example

Coldfusion.fileUpload.setUrl

Description

Returns

Function syntax

Parameters

Example

ColdFusion.grid.getSelectedRows

Description

Returns

Function syntax

Parameters

See also

Usage

Example

ColdFusion.grid.clearSelectedRows

Description

Returns

Function syntax

Parameters

Usage

Example

ColdFusion.Map.show

Description

Function syntax

Parameters

Example

ColdFusion.Map.hide

Description

Function syntax

Parameters

Example

ColdFusion.Map.refresh

Description

Function syntax

Parameters

Usage

Example

ColdFusion.Grid.getTopToolbar

Description

Function syntax

Parameters

Example

ColdFusion.Grid.getBottomToolbar

Description

Function syntax

Parameters

Example

ColdFusion.Grid.showTopToolbar

Description

Function syntax

Parameters

Example

ColdFusion.Grid.hideTopToolbar

Description

Function syntax