A reader Paul wrote me and described an issue he was having with the jQuery UI date picker. It worked in a form embedded on his page but refuses to work within a CFWINDOW. Let's look at an example of what he tried and I'll explain what went wrong and how to fix it.

To begin with, I'll create a page that uses a date picker within a form on the page. This is just to ensure a simple use case works.

   view plainprintabout
1  <html>
2  
3  <head>
4  <link rel="stylesheet" href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" />
5  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
6  <script src="/jquery/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
7  <script>
8  
9  $(document).ready(function() {
10      $("#dob").datepicker()
11  })
12  </script>
13  </head>
14  
15  <body>
16  
17  <h1>Foo</h1>
18  <form>
19  <input type="text" name="dob" id="dob"><br/>
20  </form>
21  
22  </body>
23  </html>

I've blogged about jQuery UI before (although I don't think I've blogged on just the date picker) so I won't explain each and every line. The basic gist is - load in jQuery, load in the jQuery UI library, and load in the jQuery UI CSS. Next, use the selector for the input field we want to turn into a datepicker and run the .datepicker function on it. I love how simple that is!

Alright - now let's add a CFWINDOW to the picture:

   view plainprintabout
1  <cfajaximport tags="cfwindow" />
2  <html>
3  
4  <head>
5  <link rel="stylesheet" href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" />
6  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
7  <script src="/jquery/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
8  <script>
9  function showDateWindow() {
10      ColdFusion.Window.create('dateWin','Title', '/test5.cfm',{x:100,y:100,height:300,width:350,modal:true,closable:false, draggable:true,resizable:false,center:true,initshow:false,refreshOnShow:true});
11      ColdFusion.Window.show('dateWin')    
12  }
13  
14  
15  $(document).ready(function() {
16      $("#dob").datepicker()
17      console.log('ran')    
18      $("#showWin").click(showDateWindow)
19  })
20  </script>
21  </head>
22  
23  <body>
24  
25  <h1>Foo</h1>
26  <form>
27  <input type="text" name="dob" id="dob"><br/>
28  <input type="button" id="showWin" title="Show Window" value="Show Window">
29  </form>
30  
31  </body>
32  </html>

Going from top to bottom - the first change I made was to use cfajaximport to let ColdFusion know I'd need JavaScript support for cfwindow. I added a new function, showDateWindow(), which defines the window I'll create. jQuery's document.ready function is told to listen for a click event on the showWin button, and finally, I add that button to the form.

Now for the interesting part. Let's look at test5.cfm, where my cfwindow content is loaded.

   view plainprintabout
1  <h1>Inner Form</h1>
2  <form>
3  <input type="text" name="innerdob" id="innerdob"><br/>
4  </form>

I've got a super simple form with one field - innerdob. So what happens if I add datepicker support for this to document.ready?

   view plainprintabout
1  $(document).ready(function() {
2      $("#dob").datepicker()
3      $("#innerdob").datepicker()
4      console.log('ran')
5      
6      $("#showWin").click(showDateWindow)
7  })

This is exactly what Paul tried first and it failed completely. Why? Remember that $(document).ready is the same as: "Listen for the page to load and then do this..." When the page loaded, our cfwindow didn't actually exist yet.

The first suggestion I made to Paul was to look at the CFML Reference for the Ajax functions and see if there was a function you could run to add an event listener to the cfwindow loading. There was - ColdFusion.Window.onShow. We modified the code to create the window to the following:

   view plainprintabout
1  function showDateWindow() {
2      ColdFusion.Window.create('dateWin','Title', '/test5.cfm',{x:100,y:100,height:300,width:350,modal:true,closable:false, draggable:true,resizable:false,center:true,initshow:false,refreshOnShow:true});
3      ColdFusion.Window.onShow('dateWin',doShow)
4      ColdFusion.Window.show('dateWin')    
5  }
6  
7  function doShow() {
8      $("#innerdob").datepicker()
9      console.log('doShow()')
10  }

Did that work? Nope! And it's kind of obvious if you get picky about the names. I didn't really see why though till I added:

   view plainprintabout
1  <cfset sleep(5000)>

to my page loaded in via cfwindow. What you see when clicking the button to create the window is that as soon as the window is shown, doShow is run, but the content still isn't loaded yet. What we need is something like ColdFusion.Window.onPageLoaded or somesuch. While we don't have that - we have something else - ajaxOnLoad. I modified test5.cfm like so:

   view plainprintabout
1  <cfset ajaxOnLoad("winLoaded")>
2  
3  <h1>Inner Form</h1>
4  <form>
5  <input type="text" name="innerdob" id="innerdob"><br/>
6  </form>

and in my main window added winLoaded:

   view plainprintabout
1  function winLoaded() {
2      console.log('winLoaded()')
3      $("#innerdob").datepicker()
4      console.log('made the date')
5  }

By the way, please remove the console.log statements if you make use of my code. I'm a huge believer in using logging everywhere during testing. So this finally worked... kinda. When it ran, the date picker ended up being behind the window. -sigh- So close! A quick Google search turned up posts from other people having the same problem. Not with cfwindow per se, but with the jQuery Dialog UI, which is pretty similar to cfwindow. The solution then is to add CSS to set the date picker UI to be above anything else in the DOM:

   view plainprintabout
1  <style>
2  #ui-datepicker-div {
3      z-index:10000;
4  }
5  </style>

And with that - it worked. The complete template is listed below.

   view plainprintabout
1  <cfajaximport tags="cfwindow" />
2  <html>
3  
4  <head>
5  <link rel="stylesheet" href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" />
6  <style>
7  #ui-datepicker-div {
8      z-index:10000;
9  }
10  </style>
11  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
12  <script src="/jquery/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
13  <script>
14  function showDateWindow() {
15      ColdFusion.Window.create('dateWin','Title', '/test5.cfm',{x:100,y:100,height:300,width:350,modal:true,closable:false, draggable:true,resizable:false,center:true,initshow:false,refreshOnShow:true});
16      ColdFusion.Window.onShow('dateWin',doShow)
17      ColdFusion.Window.show('dateWin')    
18  }
19  
20  function doShow() {
21      console.log('doShow()')
22  }
23  
24  function winLoaded() {
25      console.log('winLoaded()')
26      $("#innerdob").datepicker()
27      console.log('made the date')
28  }
29  
30  $(document).ready(function() {
31      $("#dob").datepicker()
32      console.log('ran')
33      
34      $("#showWin").click(showDateWindow)
35  })
36  </script>
37  </head>
38  
39  <body>
40  
41  <h1>Foo</h1>
42  <form>
43  <input type="text" name="dob" id="dob"><br/>
44  <input type="button" id="showWin" title="Show Window" value="Show Window">
45  </form>
46  
47  </body>
48  </html>