User Guide Cancel

JavaScriptFunctionsinColdFusion9Update1

Last updated on | Also Applies to ColdFusion

ColdFusion User Guide
Introduction to ColdFusion
Cloud Services in ColdFusion
Install ColdFusion
Use ColdFusion
Performance Monitoring Toolset
Adobe ColdFusion Builder extension for Visual Studio Code
Use ColdFusion Builder
Coldfusion API Manager
Configure and administer ColdFusion
ColdFusion functions
ColdFusion Tags
1. ColdFusion tags by category
2. Tags a-b
3. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
4. Tags f
5. 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
6. 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
7. Tags j-l
8. Tags m-o
9. 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
10. 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
11. 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
12. 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
Develop ColdFusion applications
1. Introducing ColdFusion
2. Changes in ColdFusion
3. Introduction to application development
4. The CFML programming language
5. Building blocks of ColdFusion applications
6. Develop CFML applications
7. Develop mobile applications
8. Access and use data
9. ColdFusion ORM
10. ColdFusion and HTML5
11. Flex and AIR integration in ColdFusion
12. Request and present information
13. Office file interoperability
14. ColdFusion portlets
15. Work with documents, charts, and reports
16. Use web elements and external objects
17. Use external resources

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

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