0

ColdFusion 8: The cfdiv Tag May Change Your Life! (With Video)

ColdFusion 8

Ok, so maybe it won't change your life but it may well change how you write applications ;) The cfdiv tag creates an AJAX powered div (or any other html tag) within which content can be submitted and loaded via AJAX all without writing a line of JavaScript. A cfform within a cfdiv will automatically submit via AJAX, use the new ajaxLink function and links will load within the cfdiv created div.

See the tag in action by watching this 3-minute screencast:

tags:
ColdFusion 8
 
Sam did you know you could embed Youtube vids with our brackted notation?

For this video you could type in

 
posted 459 days ago
Add Comment Reply to: this comment OR this thread
 
Tom Chiverton said:
 
The video is 'friend only' or something and wont play even if you click on it to load in the real YouTube site.
 
posted 459 days ago
Add Comment Reply to: this comment OR this thread
 
 
Yeah Sam, I am seeing what Tom sees (or doesn't see I guess). Did you make the video "private" or anything?
 
posted 459 days ago
Add Comment Reply to: this comment OR this thread
 
 
I think i gave you the wrong thing to paste in :)

basically, all the youtube links have a url variable "v", use that as the second value in your youtube call.

 
posted 459 days ago
Add Comment Reply to: this comment OR this thread
 
 
Oops. First time with YouTube. Its public now!
 
posted 459 days ago
Add Comment Reply to: this comment OR this thread
 
 
CF8 is almost *too* cool for me to handle.

Nice example!
 
posted 459 days ago
Add Comment Reply to: this comment OR this thread
 
hibiscusroto (chris vigliotti) said:
 
nice presentation sam...what a great new feature.
 
posted 458 days ago
Add Comment Reply to: this comment OR this thread
 
Fro said:
 
Very nice. I hope you keep doing the screencasts. They're a great way to learn.
 
posted 458 days ago
Add Comment Reply to: this comment OR this thread
 
Brian Swartzfager said:
 
Sam, great video! Thanks for sharing that with all of us.

One of the first things I play on playing with in the beta (just haven't had time yet) is and . The Scorpio road tour guys said you could pretty much put anything in a block...I wonder if you could put a in one with those AJAX-powered hyperlinks and make an AJAX-powered interactive slide...maybe gradually reveal the slide contents that way using AJAX. Wouldn't that be cool?!
 
posted 458 days ago
Add Comment Reply to: this comment OR this thread
 
Brian Swartzfager said:
 
Oops, wasn't thinking...should have known tags probably wouldn't display...let me try again...

One of the first things I play on playing with in the beta (just haven't had time yet) are the cfpresentation and cfpresentationslide tags. The Scorpio road tour guys said you could pretty much put anything in a cfpresentationslide block...I wonder if you could put a cfdiv tag in one with those AJAX-powered hyperlinks and make an AJAX-powered interactive slide...maybe gradually reveal the slide contents that way using AJAX. Wouldn't that be cool?!
 
posted 458 days ago
Add Comment Reply to: this comment OR this thread
 
 
@Fro, @Brian: Thanks! I plan on making some more screencasts in the next few weeks.

@Brian: I like your idea but from my testing of cfpresentation it converts the content to flash so the links inside it might not work.
 
posted 458 days ago
Add Comment Reply to: this comment OR this thread
 
Sam Singer said:
 
Thanks Sam! Great presentation. I keyed it into my CF8 beta and everything worked fine. This is a great learning tool. Please add more.
 
posted 457 days ago
Add Comment Reply to: this comment OR this thread
 
David said:
 
Great stuff Sam - I can't wait for the "binding" video with this tag.

Cheers,

David
 
posted 456 days ago
Add Comment Reply to: this comment OR this thread
 
oliver said:
 
Hi Sam,

I've tried your code but didn't work on cf8 beta.

The following error pop up on rendering the chart. I follow the code show on your video. The results.cfm work well on standalone window.

error:http: Error processing JavaScript in markup for element _cf_div1182301612374: [object Error]

error:http: Error processing JavaScript in markup for element _cf_div1182301612374: [object Error]

Thanks,
Oliver
 
posted 443 days ago
Add Comment Reply to: this comment OR this thread
 
Davud said:
 
Oliver,
Are you on the Host My Site CF8 beta? I had trouble initially, and had to open a support ticket with them and have them make a CFIDE mapping to your site.

Hope that works,

David
 
posted 443 days ago
Add Comment Reply to: this comment OR this thread
 
 
@Oliver: I am running CF on my mac so do not have the same mapping problems.

@David: I hope to get to a binding example in the next few weeks.
 
posted 443 days ago
Add Comment Reply to: this comment OR this thread
 
Bonnie said:
 
Hi Sam;

I bumped into your site with the cf toolbar. Great presentation! I'm not usually the first to use a new version, but the new toys in CF8 are enough to make me want to upgrade right away!

Hope all is well. And I look forward to more updates on your blog.

Bonnie
 
posted 395 days ago
Add Comment Reply to: this comment OR this thread
 
Nick said:
 
Thanks for the video, Sam.

Any ideas how to reference form fields that have been loaded into the cfdiv from another cfm file via #ajaxlink#?

I am trying to place the form focus on an input field that I've linked to, with no joy. If you view source on a page after having loaded new content into the cfdiv, the loaded content doesn't appear in the source - I suspect this is the problem, but can't find a workaround.

Any ideas?
 
posted 359 days ago
Add Comment Reply to: this comment OR this thread
 
 
@Nick: Have you tried putting the focus code in the code loaded by cfdiv?
 
posted 358 days ago
Add Comment Reply to: this comment OR this thread
 
Nick said:
 
Hi Sam. Thanks for the response. I've looked into it some more and the problem seems to be that "onload" events placed in content that is ajaxlinked within a cfdiv aren't fired.

I'm using onload="document.myForm.myElement.focus();" in the tag of the content that's loaded by cfdiv, but nothing happens when it's loaded, presumably because javascript expects it to load after a full page refresh?

Not the end of the world - just an interesting caveat that's proving a bit tricky. If anyone has a workaround I'd be happy to hear it!
 
posted 358 days ago
Add Comment Reply to: this comment OR this thread
 
 
@Nick: Try putting this after the form closes:
[script type="text/javascript"]
document.myForm.myElement.focus();
[/script]

replacing square brackets with angled ones.
 
posted 358 days ago
Add Comment Reply to: this comment OR this thread
 
Nick said:
 
Good thinking, Sam - the code now runs everytime, but no element is focussed, and Coldfusion returns: "Error processing JavaScript in markup for element headtxt:"

I've also tried it with document.getElementById('myInputID').focus(); and document.forms[0].elements[0].focus(); with no success - it just seems as if the form doesn't exist on the page when asynchronously loaded as far as Javascript and the DOM are concerned.
 
posted 358 days ago
Add Comment Reply to: this comment OR this thread
 
Nick said:
 
Finally solved the onload problem:

Turns out there's a new Coldfusion 8 javascript function for dealing with the problem caled "AjaxOnLoad()".

Here's how it's done:
1) Put [cfset AjaxOnLoad("init")] at the very end of the code you're loading into the cfdiv (replace square brackets with angled ones)
2) Put the code you want to run when the cfdiv content is loaded in a function between the head tags of your main document, like so:
init = function() {
alert("This message displays when the cfdiv content is loaded");
}

Thanks again for bringing the tag to our attention, Sam - it really will change the way I code!
 
posted 358 days ago
Add Comment Reply to: this comment OR this thread
 
 
Cool. Thanks for posting the solution.
 
posted 357 days ago
Add Comment Reply to: this comment OR this thread
 
Michael White said:
 
Nick's fix works fine unless you are using cfmenu to load the form page. It *seems* to work until the mouse leaves the menu, then the cursor disappears.
 
posted 307 days ago
Add Comment Reply to: this comment OR this thread
 
Aki said:
 
      how can you create few cfwindows from one page and do different cfajaximport tag=cfform  for each page source. Or even just have one cfwindow with different source files and clearing js cache so when you click on different buttons it won't show sama page as source?       
 
posted 247 days ago
Add Comment Reply to: this comment OR this thread
 
 
@Aki: cfajaximport is only needed once on the main page from where you can have multiple cfwindows either by calling cfwindow multiple times or using the JavaScript libraries (see livedocs.adobe.com for more).

cfajaximport simply makes sure the needed JavaScript libraries exist on the main page to support whatever you want to do in the cfwindows.
 
posted 246 days ago
Add Comment Reply to: this comment OR this thread
 
Aki said:
 
Hi Sam, thank for your answer. I am kind of stuck on this right now and pulling my hair out right now. As I mention I am opening few cfwindows via form button and each of those windows has external source with cfform. It looks like it doesn't like sources where cfform is flash format, html format works fine!
 
posted 245 days ago
Add Comment Reply to: this comment OR this thread
 
Michael White said:
 
each window can have a dynamic name (don't use the same name for each window)
 
posted 244 days ago
Add Comment Reply to: this comment OR this thread
 
Don said:
 
Well, I like cfwindow and as a matter of fact, I have almost an entire app runs inside a cfwindow, within it, cflayout and its {areas}, among others, every {area} works fine except one, for this one, I get "Error processing JavaScript in markup for element XYZ", some times, the err is ignore, other time, it prevents this {area} from displaying, same behavior for both IE7 and FF2, I'm pulling my hairs, what to do? Thanks.
 
posted 229 days ago
Add Comment Reply to: this comment OR this thread
 
Sid said:
 
Thanks for the post. Got me through a few rough spots. Nicks' comment about calling a function in the main page using AjaxOnLoad was very helpful.
 
posted 210 days ago
Add Comment Reply to: this comment OR this thread
 
Dave said:
 
Great vid. I'm new to using ajax, think I did something wrong. When I click submit, the flash chart renders in a full page view, not only in the cfdiv. The URL stays the same just pie chart in upper left hand corner. What'd I miss?

thanks
- Dave
 
posted 31 days ago
Add Comment Reply to: this comment OR this thread
 
samfarmer said:
 
@Dave: Make sure you are using cfform and not form. That should fix it.
 
posted 30 days ago
Add Comment Reply to: this comment OR this thread
 
Joel said:
 
Sam - I got one for you... I'm using a drop down menu to populate a list of flash flv movies. The list's selected item is bound to a CFDIV. The page that is called with the CFDIV is using swfobjects.js to dynamically display the video. There is a url parameter being passed in the cfdiv and is being read by the called page and a query is able to be executed.

BUT when the page loads or the drop down item changes, I get an error message that says "Error processing JavaScript in markup for the element theDiv" I'm can't add a ?cfdebug as there are already string variables in use.

The called page runs, when it's hard coded (no dynamic calls to a db) and the page is referenced with an cfinclude. So I know the swfobject script is correct.

What's the fix?

Thanks...
Joel
 
posted 13 days ago
Add Comment Reply to: this comment OR this thread
 

Search

About Me
I am a 32-year old Web Developer specializing in ColdFusion. I live and work in downtown Washington, DC with my wife and daughter. I work for Interfolio where we help people collect, deliver and showcase their life's work. Read more About Me

2007 CFeMmy Best Newcommer winner
As voted on by fellow CF Bloggers.