User Guide Cancel

JavaScriptFunctionsinColdFusion9Update1

 

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

    <br><cfdump var="#CGI#" keys="15" label="[CGI scope]"><br>

    Tab2_Src.cfm

    <br><cfdump var="#server#" label="[Server scope]"><br>

    Tab3_Src.cfm

    <br><cfdump var="#server.coldfusion#" label="[Showing key coldfusion in server scope]"><br>

    Tab4_Src.cfm__

    <br><cfdump var="#server.os#" label="[Showing key OS in server scope]"><br>

    layout.cfm

    <script>
    var navigateToTab = function(layoutId,tabId){
    alert("Navigating to " + tabId);
    ColdFusion.Layout.selectTab(layoutId,tabId);
    ColdFusion.navigate('navigate.cfm',tabId);
    }
    var disableBind = function(tabId){
    alert("Disabling binding on source for " + tabId);
    ColdFusion.Layout.disableSourceBind(tabId);
    }
    var enableBind = function(tabId){
    alert("Enabling binding on source for " + tabId);
    ColdFusion.Layout.enableSourceBind(tabId);
    }

    </script>
    <cflayout type="tab" name="layout1">
    <cflayoutarea
    name = "tab1"
    overflow = "auto"
    refreshonactivate = "yes"
    title = "Tab 1"
    source = "tab1_src.cfm"/>
    <cflayoutarea
    name = "tab2"
    overflow = "auto"
    refreshonactivate = "false"
    title = "Tab 2"
    source = "tab2_src.cfm"
    bindonload=false
    />
    <cflayoutarea
    name = "tab3"
    overflow = "auto"
    refreshonactivate = "yes"
    title = "Tab 3"
    source = "tab3_src.cfm"
    />
    </cflayout>
    <cfform name="myform">
    <cfinput type="button" name="disable" value="Disable Source Bind" onClick="javascript:disableBind('tab2')">
    <cfinput type="button" name="b" value="Navigate" onClick="javascript:navigateToTab('layout1','tab2')">
    <cfinput type="button" name="disable" value="Enable Source Bind" onClick="javascript:enableBind('tab2')">
    </cfform>

     

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

<script language="javascript">
var uploadDone = function(result){
alert("File uploaded");
}

var setUploadUrl = function(id)
{
var selectedFiles = ColdFusion.FileUpload.getSelectedFiles(id);
var uploadUrl = "/manual/ajaxui/cffileupload/setUrl/includes/_uploadall.cfm";
alert("Upload URL : " + uploadUrl);
if(selectedFiles.length){
ColdFusion.FileUpload.setURL(id,uploadUrl);
ColdFusion.FileUpload.startUpload(id);
}
}
var callbackhandler = function(obj)
{
var fileName = obj["FILENAME"];
var status = obj["STATUS"];
var message = obj["MESSAGE"];
var msg = "In callbackhandler()" + "\n\n" +
"FILENAME: " + fileName + "\n\n" +
"STATUS: " + status + "\n\n" +
"MESSAGE: " + message
alert(msg);
}
var errorhandler = function()
{
alert("In errorhandler()");
}
var uploadcompleted = function()
{
alert("All files have been uploaded successfully");
}
</script>
<cfform name="frmUpload">
<br>
<cffileupload name="uploader" hideuploadbutton="true" onComplete="uploadDone" onError="errorhandler" onUploadComplete="uploadcompleted">
<br>
<cfinput type="button" name="submit" value="Click to set URL and Upload Files" onClick="setUploadUrl('uploader')">
</cfform>

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.

See also

FileUpload

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

<script>
function showMap(mapId)
{
ColdFusion.Map.show(mapId);
}

function hideMap(mapId)
{
ColdFusion.Map.hide(mapId);
}
</script>
<a href="##" id="a1" onclick="return showMap('mainMap')">Show Map</a> | <a href="##" id="a1" onclick="return hideMap('mainMap')">Hide Map</a>
<cfmap
zoomlevel = "12"
name = "mainMap"
showcentermarker= "true"
centeraddress = "The Key Learning centre, Oxford, UK"
title="Venue Address"
hideborder=false
collapsible=true
initShow=false/>

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

<script type="text/javascript" src="/CFIDE/scripts/ajax/spry/includes_minified/SpryCollapsiblePanel.js" ></script>
<link type="text/css" href="/CFIDE/scripts/ajax/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" rel="stylesheet">
<div id="cp" class="CollapsiblePanel" style="width:500px;">
<div class="CollapsiblePanelTab" tabindex="0">SHOW MAP</div>
<div class="CollapsiblePanelContent">
<cfmap
width="500"
height="200"
zoomlevel="12"
name="mainMap"
markercolor="333444"
showscale="false"
typecontrol="none"
showcentermarker="true"
centeraddress="The Key Learning centre, Oxford, UK"
>
</cfmap>
</div>
</div>
<script type="text/javascript">
var myTabClick = function()
{
!cpanel.isOpen() ? cpanel.open() : cpanel.close();
cpanel.focus();
ColdFusion.Map.refresh('mainMap');
}
var cpanel = new Spry.Widget.CollapsiblePanel("cp", {contentIsOpen:false});
cpanel.onTabClick = myTabClick;
</script>

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

<script>
var refreshToolbar = function(id,type){
type == "top" ? ColdFusion.Grid.refreshTopToolbar(id) : ColdFusion.Grid.refreshBottomToolbar(id);
}

var hideToolbar = function(id,type){
type == "top" ? ColdFusion.Grid.hideTopToolbar(id) : ColdFusion.Grid.hideBottomToolbar(id);
}

var showToolbar = function(id,type){
(type == "top") ? ColdFusion.Grid.showTopToolbar(id) : ColdFusion.Grid.showBottomToolbar(id);
}

var handleToolbar = function(id,type){
if(type == "top"){
tbar = ColdFusion.Grid.getTopToolbar(id);
tbar.addButton({
text: "Add User Account",
tooltip: "Add a user account",
handler: addUserAccount
});
}
else{
bbar = ColdFusion.Grid.getBottomToolbar(id);
bbar.add(new Ext.Toolbar.Separator());
bbar.addButton({
text: "Delete User Account",
tooltip: "Delete a user account",
handler: deleteUserAccount
});
}
}

var GetUserInfo = function(){
alert("Retrieving user account");
}

var addUserAccount = function(){
alert("Adding new user account")
}
var deleteUserAccount = function(){
alert("Deleting user account")
}
</script>
<cfform>
<br>
<cfinput type="button" onClick="showToolbar('empGrid','top')" name="btn1" value="Show Top Toolbar">
<cfinput type="button" onClick="handleToolbar('empGrid','top')" name="btn2" value="Add button to Top Toolbar">
<cfinput type="button" onClick="refreshToolbar('empGrid','top')" name="btn3" value="Refresh Top Toolbar">
<cfinput type="button" onClick="hideToolbar('empGrid','top')" name="btn4" value="Hide Top Toolbar">
<br><br>

<cfgrid
format="html"
name="empGrid"
width="800"
pagesize=5
sort=true
title="Employee database"
collapsible="true"
insert="yes"
delete="yes"
bind="cfc:grid.getEmployees({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onChange="cfc:grid.editEmployees({cfgridaction},{cfgridrow},{cfgridchanged})"
selectMode="edit"
>
<cfgridcolumn name="Emp_ID" display=false header="ID" />
<cfgridcolumn name="FirstName" display=true header="First Name"/>
<cfgridcolumn name="Email" display=true header="Email"/>
<cfgridcolumn name="Department" display=true header="Department" />
</cfgrid>

<br><br>
<cfinput type="button" onClick="hideToolbar('empGrid','bottom')" name="btn5" value="Hide Bottom Toolbar">
<cfinput type="button" onClick="showToolbar('empGrid','bottom')" name="btn6" value="Show Bottom Toolbar">
<cfinput type="button" onClick="handleToolbar('empGrid','bottom')" name="btn7" value="Add button to Bottom Toolbar">
<cfinput type="button" onClick="refreshToolbar('empGrid','bottom')" name="btn8" value="Refresh Bottom Toolbar">
</cfform>

Get help faster and easier

New user?