I am working on a project where I wanted to load a dialog with detail on the selected item. This seemed fairly straight forward since jQuery is so awesome. However, I had a little trouble digging up a good example. So, after some research and combining multiple examples I got it working.

It is actually very easy to accomplish. Here is how...

First, the div that will become the dialog box. I just stuck this at the bottom of the page.

view plain print about
1<div id="dialog-detail" title="Item Detail">

Then the JS code to open the dialog...

view plain print about
1function doDetail(itemID){
2    $("#dialog-detail").load('./eventDetail.cfm?id=' + itemID).dialog({modal: true});

I have a link that calls the "doDetail" function and passes in the id of the selected item. The eventDetail.cfm file processes the id and returns the necessary info into the dialog.

One thing I found that was interesting that was the dialog auto sized to fit the content. Well kinda, it would auto grow the height but not the width. The width stayed the default and a horizontal scroll appeared.

Till next time...