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
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. |
bindOnLoad |
Optional |
true |
|
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. |
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.