Sep 23
Adding a Preview tab to form - CF8
Comments (10) || ColdFusion 2423 ViewsThis is a quick entry showing how you can use the new cflayout tabs and the bind attribute of the cfdiv tag to quickly add a preview tab to a textarea form field.
<form action="" method="post">
<cflayout type="tab">
<cflayoutarea title="entry">
<textarea name="textentry" rows="15" cols="50"></textarea>
</cflayoutarea>
<cflayoutarea title="Preview">
<cfdiv bind="{textentry}">
</cflayoutarea>
</cflayout>
<input type="submit" value="Save">
</form>
<cflayout type="tab">
<cflayoutarea title="entry">
<textarea name="textentry" rows="15" cols="50"></textarea>
</cflayoutarea>
<cflayoutarea title="Preview">
<cfdiv bind="{textentry}">
</cflayoutarea>
</cflayout>
<input type="submit" value="Save">
</form>
Edit - added demo page:
Demo Link
Edit 2 - added rich text example: Rich Text demo
9/23/07 6:53 PM
That is truly interesting. I never thought to bind to a simple string. Does it work ok with HTML as well? Ie, using a rich text textarea.
9/23/07 7:07 PM
yep -
<cfform action="" method="post">
<cflayout type="tab">
<cflayoutarea title="Entry Page">
<cftextarea richtext="true" name="textentry" rows="15" cols="80"></cftextarea>
</cflayoutarea>
<cflayoutarea title="Preview">
<cfdiv bind="{textentry}">
</cflayoutarea>
</cflayout>
<input type="submit" value="Save">
</cfform>
9/23/07 7:15 PM
Thats a cool use of cflayout. It works with rich text as well.
9/23/07 8:23 PM
Nice
10/19/07 11:22 AM
What if you want to prepopulate the textarea field like this?
<cftextarea richtext="true" name="textentry" rows="15" cols="80">#myTextVal#</cftextarea>
10/19/07 11:31 AM
@Jeff: It would work fine.
10/19/07 1:17 PM
Actually, I tried it and it doesn't work until you type something new in to the textarea field.
1/22/08 3:35 AM
Sorry bit late to the game on this one!
@Jeff you could use bindonload in the cfdiv
3/1/08 11:42 AM
Is there any way to have the cfdiv evaluate the bound content so that if I entered #now()# into the textarea field the date would show on the preview?
3/1/08 1:25 PM
Not really - the text you enter is being processed on the client side with javascript. I supposed you could use cfajaxproxy to send it back to the server and then update the output but I'm not sure I'd recommend that.