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
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
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
Example
See example in ColdFusion.Map.show
ColdFusion.Map.refresh
Description
Reloads the map.
Function syntax
ColdFusion.Map.refresh (Id)
Parameters
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
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
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
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
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
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
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
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>
|
