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.
<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, you must close it with /> character combination.
cfajaximport, cflayout, cfpod, cfwindow
ColdFusion 8: Added this tag
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 |
To use this attribute, you must also specify a bind attribute. For more information, see Using the bindOnLoad attribute in Using Ajax UI Components and Features in the ColdFusion Developer's Guide. |
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, you must also specify a bind attribute. |
tagName |
Optional |
DIV |
The HTML container tag to create. |
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 ColdFusion Developer's Guide.
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.