ColdFusion Development Blog by Scott Bennett - AJAX

Orange County CFUG Meeting Tonight

Thu, 17 Jul 2008 18:36:00 -0400

At the Orange County ColdFusion Users Group (www.occfug.org) meeting tonight, I will be presenting an overview on all the AJAX related features in ColdFusion 8. Then I will be going into detail on some of my favorite features and offer some tips on how to dig into the underlying Ext objects to find the solutions you need when your application requires more customized functionality than the default behaviors that were implemented in CF8. So if you're in the Orange County area, come to Traveland USA tonight at 6:30 pm and join us.

Workaround for CFInput DateField + CFDiv + Internet Explorer Glitch

Wed, 25 Jun 2008 21:04:00 -0400

A while back I blogged about a div layer positioning glitch that occurs in IE when you position a cfinput datefield above a cflayout or cfdiv generated div layer. This problem seems to be cause by the fact that in IE, a relative positioned element influences the stacking order of it's child-elements, which violates the CSS specification, but who really needs standards anyways right? Well, I figured out a way to workaround it, and it's really stupid that I didn't think of it before. I kept trying (unsuccessfully) to write a JavaScript function that would find the layers and reposition them after the page loaded, when finally a light bulb went on in my head, and I came up with a much simpler solution. [More]

CFWindow as Image onMouseOver Enlarger/Pop Up

Fri, 30 May 2008 19:29:00 -0400

In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Ebenezer asked the question:

"CFwindows is quite nice, but i need it to behave in a particular way. I want to remove the frame and the (x) close button. I want to use cfwindow to just "display the bigger size of an image on mouseover and close on mouse out. Anyone with an idea."

Below is an example of how to remove the toolbar and borders from the cfwindow and display the large image when you rollover the thumbnail. [More]

Reposition A CFWindow From Center

Tue, 22 Apr 2008 16:29:00 -0400

In a comment on a previous post I wrote about Enhancing CFWindow with JavaScript, Nathan asked the question:

"I like the center feature but if you want to move the window to a little below center what function do you call to center then move it down 20 px?"

The answer is to use the Ext.BasicDialog.center() function, then get the windows Ext.Element object using the Ext.BasicDialog.getEl() function. The Ext.Element object has the getX() and getY() methods, which will give you access to the windows X and Y coordinates. You can use those, in combination with the Ext.BasicDialog.moveTo() function, to move the window to your desired position relative to the center. [More]

CFWindow with a Minimize / Maximize button

Tue, 11 Mar 2008 19:42:00 -0400

Michael Asked:

"Is there any way to add a minimize button to a CFWindow? "

As a matter of fact, the Ext.BasicDialog object that powers the CFWindow tag does have a "collapsible" configuration option. However, Adobe did not add that as an attribute in the CF8 implementation of CFWindow. They currently have it hard-coded so that all CFWindow generated dialogs are set to "collapsible:false". Hopefully they will add a collapsible attribute to the CFWindow tag in some future release, but until then, adding the Minimize/Maximize button onto the CFWindow tool bar is a fairly painless job with the snippet of JavaScript that you can find below. [More]

CFGrid: Disabling the Selected Row HighLighting

Tue, 11 Mar 2008 09:00:00 -0400

I was working on a project the other day that was using CFGrid to manage some data and there was a button on each row to perform a certain action. However, we didn't want the background color of a row to change when the user clicks on a row or on the button. I created this little javascript that adds a listener to the "beforerowselect" event in the underlying Ext.grid's Row Selection Model and cancels any row selections, preventing the row from being highlighted. [More]

CFWindow Event Listeners

Wed, 30 Jan 2008 15:47:00 -0400

The CFWindow tag is built using the Ext.BasicDialog object. This object has several public events that you can add listeners to. You can use the Ext.BasicDialog objects on() function to add listeners to these events that will fire a specific function when the specified event occurs. You can program the listener functions to react as necessary to the various events. Here is a list of the events that you can set up listeners for: [More]

Session.cfc

Wed, 23 Jan 2008 16:52:00 -0400

In a previous post I created a CFC to save simple variables into the session scope. In that CFC I had set up two functions, "SetSessionVar" and "GetSessionVar". However I ended up only needing the "SetSessionVar" function for my example so I never really tested the "GetSessionVar" function. Someone asked me today how to invoke it, and that is when I realized there were a couple little problems that I needed to fix. [More]

JavaScript Error from CFChart within CFLayout

Mon, 21 Jan 2008 19:57:00 -0400

I ran accross a noteworthy question on Experts-Exchange today regarding a javascript error that occurs when you have a cflayout that navigates to a page with a cfchart tag. [More]

JavaScript to Identify Current CFWindows

Thu, 20 Dec 2007 15:12:00 -0400

A couple weeks ago I wrote a post on Enhancing CFWindow with JavaScript, and it was recently asked if there was a way to identify all the windows and their visible status that currently exist on a page where you are using the ColdFusion.Window.create function to create new CFWindow instances. It took a few minutes of digging with FireBug, but I found that there is a ColdFusion.objectCache object that holds information about the various ext object that get created with the ColdFusion AJAX features. I created a function that loops through the objectCache and finds objects that have a "cfwindowname" property. Then used the Ext.BasicDialog.isVisible() function to determine if the window is currently visible. [More]

CF8 AJAX Features: Enhancing CFWindow with JavaScript

Tue, 04 Dec 2007 15:16:00 -0400

ColdFusion 8 added the CFWindow tag which creates a pop-up window in the browser, which is not really a pop-up window, but rather it is a div layer that looks like a window and can be hidden and shown via JavaScript. Today, I am going to demonstrate a couple ways you can expand your use of the CFWindow tag by incorporating some JavaScript that interacts with the underlying Ext.BasicDialog object. [More]

CFLayout Type="tab" - Saving Multiple Tab Layout States In Session

Mon, 03 Dec 2007 13:55:00 -0400

A couple weeks ago I posted an entry on how to save the state of selected CFLayout generated tabs on a page. Then it was asked how that example could be expanded to save the state of multiple tab layouts on a page. I have created an example of how to do that below. [More]

CF8 AJAX JavaScript Functions: Getting Underlying JavaScript Objects

Thu, 29 Nov 2007 18:54:00 -0400

I have blogged a lot about the new AJAX related functionality that comes with CF8, and some of my examples have demonstrated how to utilize the underlying EXT and YUI JavaScript libraries that power these great features. There are 5 functions that ColdFusion provides that give you access to the JavaScript objects, and if you are proficient at JavaScript, I highly recommend you spend some time researching each of the libraries so you can be familiar with how you can customize them to your needs. If your not familiar with JavaScript, get familiar. More and more attention is being focused on making websites more engaging for users, and knowing how to use javascript to implement AJAX related features is a powerful tool to have at your disposal. [More]

CF8 AJAX Features: Validating CFGrid Data

Wed, 28 Nov 2007 16:05:00 -0400

Yesterday I blogged about how to create a custom date renderer for CFGrid. Today I am going to add to that example how to validate the data entered into the CFGrid before it is sent to the cfc to update the database. The CFGrid (Ext.grid.EditorGrid) object has an event called "validateedit", which fires after a cell is edited, but before the value is set in the record. We will be adding a listener to that event that will validate the data that is being submitted and, if the data is not valid, display an alert message and cancel the changes. [More]

CFGrid Custom Date Renderer

Tue, 27 Nov 2007 17:28:00 -0400

One of the coolest things about the ColdFusion 8 implementation of the CFGrid tag is that you can do a lot of customization, if you know your way around the Ext objects. I have found several blog entries about using custom renderers with the CFGrid tag. However, could not find a working example of one for date fields, so I decided to build one. [More]