Driven-Monkey

One of the great things about my new job is that I am constantly running into little problems that I am having to figure out, and some of them are interesting enough that I’m going to try and post what solutions I can here, so that hopefully it can help other people with similar problems.

One issue I came across recently was creating modal popup’s in ColdFusion, so that a user could click on a button, fill out a form, then when they submitted the appropriate part of the form was reloaded, and they never had to navigate away. The example that I am going to use is a standard select box with a list in it and a button that opens the window to modify the contents of that list.

To do this we will be using a cfwindow. For this example I’ll assume you already have the page that you would like to display in the window, and have some basic CFML and Javascript knowledge.

function createWindow() {
  var config = new Object();
  config.modal=true;
  config.center=true;
  config.height=500;
  config.width=700;
  config.resizable=false;
  config.closable=false;
  config.draggable=true;
  config.refreshonshow=true;
  try{
    ColdFusion.Window.getWindowObject('myWindow');
    ColdFusion.navigate('/windowContent.cfm', 'myWindow');
    ColdFusion.Window.show('myWindow');
  } catch(e) {
    ColdFusion.Window.create('myWindow','', '/windowContent.cfm', config);
    document.getElementById(ColdFusion.Window.getWindowObject("myWindow").header.id).className = "windowHdr";
  }
  ColdFusion.Window.getWindowObject('resetPasswordWindow').center();
}

So lets explain what we are doing here. The first part of this is creating a new struct called config, where we hold the configuration for the window. There are many configuration options avaiable, and most of them have defaults, yet for mine I wanted to go a little more custom than the default. Most of the options are fairly straight forward, so if you need a little more of an explanation, check out the cfdocs.org page for cfwindow.

There are a couple of known bugs with CFML 9 involving CFML, the first one of which is that the function used to destroy a window (and free up the resources associated with it) does not currently work.

ColdFusion.Window.destory('myWindow', true);

That is what the try/catch block is for. First, it attempts to get the window (in case it has been previously created and hidden). If it is successful, it uses a ColdFusion.navigate to redirect the window to the correct page, then shows the window. If it fails to get the window, it assumes that the window does not exist, and will create a new window.

The second line in the catch is used set the CSS class name of the window. This should be able to be set in the config struct, however it did not appear to work for me.

The last workaround is the bottom line of the code. When upgrading from CF8 to CF9 the windows stopped appearing in the center of the screen (not only was this set in the config, it is also supposed to be the default). So, we grab the window, and tell it it center once it has been created.

One last little trick is what to do when the window is closed. The site I am currently working on uses these cfwindows to modify the contents of the main page, so once the window has been closed, we need to reload the page. As it turns out, there is an event associated with closing the window so it is very simple to do this. All you have to do is insert this code after the last line in the code above.

ColdFusion.Window.onHide('myWindow', reloadPage);

And then in the reloadPage function:

function reloadPage(){
  location.reload(true);
}

I did attempt to this by directly inserting the location.reload(true) into the onHide call, but this didnt work.

I have some other stuff lined up that I am going to post, but it took over a month to get this post together, so it might be a little while.