Using jQuery load in place of a cfdiv
As many of you know, yesterday I ventured into the world of jQuery for the first time. I'm a little late to the party so I've decided that in order to get proficient with jQuery before the apocalypse I'm going to have to use it in my everyday client development tasks.
To give you some background, I have a long, on-going project where I'm creating a warehouse management/manufacturing application using ColdFusion 8 and SQL Server 2005. The app is huge and I've been using lots of out of the box cfajax widgets and cfajaxproxy to do cool things. I wanted to see how tough it would be to make jQuery do the same type of thing that I would normally use a cfdiv to accomplish. The quick answer? Easy, easy, easy - so easy that I couldn't believe it and had to ask Ray Camden if it were truly that easy or if I had made some sort of lucky mistake. I said, "Ray - it's too fast and too easy" and he said "Is that even AIR that you're breathing???" so here we go!
First off, I had a simple cfdiv that was bound to a URL...
To give you an overall visual, we have a multi-tabbed form with master info, a grid that displays steps related to the job that we're looking at and then finally our friend the cfdiv (in yellow) that shows the entire series of steps for the job in a straightforward, linear fashion as illustrated below...
Replicating the functionality of the cfdiv turned out to be super easy. First, we need jQuery and we need to use load to essentially perform a GET on the quickprocessflow.cfm page which takes one URL parameter to tell it which Job Template Code to gather Job Template Steps, or process flow information.
2
3 <script>
4 $(document).ready(function(){
5 refreshProcessFlow();
6 });
7
8 function refreshProcessFlow(){
9 $(document).ready(function(){
10 var jobTemplateCode = '<cfoutput>#URL.jobTemplateCode#</cfoutput>';
11 $("#processFlow").load('quickprocessflow.cfm?jobTemplateCode=' + jobTemplateCode);
12 });
13 }
My cfgrid has buttons above it for adding, editing and deleting process steps. So when the user adds a new process step I need to make certain that my div (formerly cfdiv) will refresh itself to reflect the changes that the user has made using the cfgrid. Because of this, when I close and kill (or destroy) the cfwindow that my users enter Job Steps into, I need to refresh my div to keep it current. Take a look below and you'll see that I'm doing just that in my other, cfwindow related, javascript functions. I'm actually using jQuery in my onHide handler function killJobTemplateDetailWin when I call refreshProcessFlow as shown below...
2 ColdFusion.Window.destroy(winToKill, true);
3 ColdFusion.Grid.refresh('gridJobTemplateDetail', true);
4 refreshProcessFlow();
5 }
6
7 closeJobTemplateDetailWin = function() {
8 ColdFusion.Window.onHide(jobTemplateDetailWin, killJobTemplateDetailWin);
9 ColdFusion.Window.hide(jobTemplateDetailWin);
10 }
So to recap, jQuery is using load to GET quickprocessflow.cfm when the user initially browses to the page and ColdFusion is firing it up as well when the cfwindow is destroyed. Now I just simply have a plain old div named processFlow...
Be sure to tune in next week to see jQuery shout "You Lie" really loudly when Kanye West disrupts any number of events.
You can also extend ExtJS with the jQuery Adapter so that you can talk back and forward between the two using the connector.
It's just as easy to do it directly in extjs also
[code]
Ext.onReady( function() {
Ext.get('processFlow').load('quickprocessflow.cfm?jobTemplateCode=#URL.jobTemplateCode#');
})
[/code]
I'm trying to use Spry widgets within a CFDIV and it doesn't work because it can't include the .js files.
This might work better for you then cfdiv. I've learned the hard way that you can't really mix spry and cf8's ajax stuff with any real success.