ColdFusion 9.0 Resources

cfdiv

Description

Creates an HTML div tag or other HTML container tag and lets you use asynchronous form submission or a bind expression to dynamically control the tag contents.

Syntax

<cfdiv 
    bind = "bind expression" 
    bindOnLoad = "true|false" 
    ID = "HTML tag ID" 
    onBindError = "JavaScript function name" 
    tagName = "HTML tag name" 
/> 
 
OR 
 
<cfdiv 
    ID = "HTML tag ID" 
    tagName = "HTML tag name"> 
        tag body contents 
</cfdiv>

If the tag does not have a body and end tag, close it with /> character combination.

Note: You can specify this tag’s attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag’s attribute name as structure key.

History

ColdFusion 8: Added this tag

Attributes

The following table lists attributes that ColdFusion uses directly. The tag passes any other attributes that you specify directly as tag attributes to the generated HTML tag.

Attribute	Req/Opt	Default	Description
`bind`	Optional		A bind expression that returns the container contents. If you specify this attribute the `cfdiv` tag cannot have a body. Note:: If a CFML page specified in this attribute contains tags that use AJAX features, such as `cfform`, `cfgrid`, and `cfwindow`, you must use a `cfajaximport` tag on the page with the `cfdiv` tag. For more information, see `cfajaximport`.
`bindOnLoad`	Optional	`true`	`true`: executes the `bind` attribute expression when first loading the tag. `false`: does not execute the `bind` attribute expression until the first bound event. To use this attribute, also specify a `bind` attribute. For more information, see Using the bindOnLoad attribute in Using Ajax User Interface Components and Features in the Developing ColdFusion Applications.
`ID`	Optional		The HTML `ID` attribute value to assign to the generated container tag.
`onBindError`	Optional	See Description	The name of a JavaScript function to execute if evaluating a bind expression results in an error. The function must take two attributes: an HTTP status code and a message. If you omit this attribute, and have specified a global error handler (by using the `ColdFusion.setGlobalErrorHandler` function), it displays the error message; otherwise a default error pop-up window appears. To use this attribute, also specify a `bind` attribute.
`tagName`	Optional	DIV	The HTML container tag to create.

Usage

By default, the cfdiv tag creates a div HTML element. You can use standard HTML and CSS techniques to control the position and appearance of the element and its contents.

Use the tagName attribute to create and populate an HTML content element, such as span or b. Use the cfdiv tag to create tags that can take HTML markup content directly in the body, such as span, i, b, or p, and not for tags that cannot, such as input, option, and frameset.

If you submit a form that is inside a cfdiv tag (including in HTML returned by a bind expression), the form submits asynchronously, and the response from the form submission populates the cfdiv region.

If you specify a bind attribute, the tag dynamically populates the element using a bind expression. The bind expression can specify a CFC function, a JavaScript function, a URL, or a string that contains bind parameters. An animated icon and the text "Loading..." appears while the contents are being fetched. For detailed information on using the bind attribute and bind expressions, see Using Ajax Data and Development Features in the Developing ColdFusion Applications.

Example

The following simple example shows how you can use the cfdiv tag. It uses binding to display the contents of a text input field in an HTML DIV region.

The cfdivtag.cfm file, the main application file, has the following contents.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>cfdiv Example</title> 
</head> 
 
<body> 
<cfform> 
    <cfinput name="tinput1" type="text"> 
</cfform> 
 
<h3> using a div</h3> 
<cfdiv bind="url:divsource.cfm?InputText={tinput1}" ID="theDiv" 
        style="background-color:##CCffFF; color:red; height:350"/> 
</body> 
</html>

The divsource.cfm file that defines the contents of the div region has the following code:

<h3>Echoing main page input:</h3> 
<cfoutput> 
    <cfif isdefined("url.InputText") AND url.InputText NEQ ""> 
        #url.InputText# 
    <cfelse> 
        No input 
    </cfif> 
</cfoutput>

To test the code, run the cfdivtag.cfm page, enter some text, and tab out of the text box or click outside the text box. The div region appears with a light blue background and red text, and when you exit the text box, it shows the text you entered.