Loading...

Loading...

ColdFusion 8: The cfdiv Tag May Change Your Life! (With Video)
Posted : Jun 4, 2007 2:05 AM
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 8Aaron Lynch said:
Sam did you know you could embed Youtube vids with our brackted notation?
For this video you could type in
For this video you could type in
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.
Aaron Lynch said:
Yeah Sam, I am seeing what Tom sees (or doesn't see I guess). Did you make the video "private" or anything?
Aaron Lynch said:
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.
basically, all the youtube links have a url variable "v", use that as the second value in your youtube call.
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?!
One of the first things I play on playing with in the beta (just haven't had time yet) is
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?!
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?!
Sam Farmer said:
@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.
@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.
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.
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
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
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
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
Sam Farmer said:
@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.
@David: I hope to get to a binding example in the next few weeks.
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
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
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?
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?
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!
I'm using onload="document.myForm.myElement.focus();" in the
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!
Sam Farmer said:
@Nick: Try putting this after the form closes:
[script type="text/javascript"]
document.myForm.myElement.focus();
[/script]
replacing square brackets with angled ones.
[script type="text/javascript"]
document.myForm.myElement.focus();
[/script]
replacing square brackets with angled ones.
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.
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.
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!
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!
.: HIDE REPLIES :.
cfgurney said:
@nick posted the AjaxOnload() solution some time ago, but I recently struggled with getting a JS function to fire properly within the CFDIV that had AjaxOnload() in it with CF8. I was trying to set the value of a form element in a parent (document.form.form_element.value = ''). It simply would not fire, although a js alert() function would.
Turns out that you MUST have the HEAD tags surrounding the JS in the CFDIV file. Otherwise, the function described above will not fire. This could be a "Duh" for others, but I post this so others may benefit from my day or so of frustration.
Turns out that you MUST have the HEAD tags surrounding the JS in the CFDIV file. Otherwise, the function described above will not fire. This could be a "Duh" for others, but I post this so others may benefit from my day or so of frustration.
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.
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?
Sam Farmer said:
@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.
cfajaximport simply makes sure the needed JavaScript libraries exist on the main page to support whatever you want to do in the cfwindows.
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!
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.
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.
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
thanks
- Dave
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
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
.: HIDE REPLIES :.







Loading....