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.

Category

Display management tags

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.

See also

cfajaximport, cflayout, cfpod, cfwindow

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.