A Little Bit of jQuery
I often find myself behind the curve when it comes to web application technology. There is always something new popping up I am usually hung up on discovering or working out best practices with yesterdays gizmos. Well recently I worked on a project that forced me to learn and use some newer technologies so I thought that was probably as good of place as any to start this blog.
I am sure most of you have seen dialog boxes that have been popping up (no pun intended) on web sites that are not new browser windows and that dim the current page behind the dialog. The first time I experience such a dialog box it was used as a "lightbox." The dialog presented an image and allowed me to flip through a collection of related images. Since then I have seen all sorts of content in this type of dialog box. Regardless of the content, myself and many others have come to call these dialog boxes, lightbox dialogs.
The customer for the project I mentioned earlier requested that we use a lightbox dialog to allow their customers to select an image from a set of categorized thumbnails. So, I set off to learn how to make a lightbox dialog. I was not surprised to find that there are all sorts options, but the one I settled on was offered by jQuery UI and is simply called Dialog. You can find a demonstration, and documentation, here: http://jqueryui.com/demos/dialog. I won't cover the process of setting up jQuery UI in your web site/application as the instructions provided by the aforementioned web site are pretty good, but I wanted to show just how little I had to do to create this effect.
Once I had jQuery UI set up in my web application with the necessary bits for Dialog, I simply added a form button to my page:
<input type="button" value="Choose"
onclick="javascript:showDialog('#image-picker', 825)" />
where showDialog looked like:
function showDialog(content_id, dialog_width) {
$( content_id ).dialog( { width: dialog_width, modal: true,
buttons: { Cancel: function() {
$( this ).dialog( "close" ); } }
} );
};
The function call in the showDialog function is the jQuery UI invocation. It produces a lightbox dialog that is dialog_width pixels in width and has a Cancel button that simply closes the dlalog and restores the page to its previous state. The parameter content_id specifies a div that exists on the page and that div specifies the content (other than the Cancel button) for the dialog. The content is structured and styled using HTML/CSS just as it would be if it were embedded on the page. In fact, you will need to specify, "display: none" for the div to ensure that it does not appear embedded on the page and only appears in the dialog. I placed the content div for the dialog near the top of the HTML code for my page, just before the form that contains the invoking button.
Because the content of the lightbox dialog is part of the page from which it is invoked, it is simple to affect changes on the page in response to activities that occur in the dialog. In my case, when the user clicked on an image thumbnail in the dialog, the ID for the clicked image is placed in a text input on the page (not in the dialog) and the dialog is dismissed. This was accomplished by wrapping the thumbnail images with an anchor tag:
<a href="javascript:pickAndDismiss('#image-picker', 'image_input',
'image_name')">
where pickAndDismiss looked like:
function pickAndDismiss(content_id, text_box_id, image_name) {
var input_elm = document.getElementById(text_box_id);
input_elm.value = image_name;
$( content_id ).dialog( "close" );
};
The text input (id = image_input) into which the image ID (image_name) is written does not exist in the dlalog content.
That is pretty much all there is to it. I found it easy to learn and simple to implement. My project did not demand general browser compatibility, but I did test with Firefox 3.6, Internet Explorer 7 & 8, and found that jQuery UI Dialog worked fine with all three browsers. My only complaint with jQuery UI Dialog at this point is that I needed to set the dialog width in my call to the Dialog function. While you do not need to explicitly set the width, if you do not, the width defaults to 300px rather than being driven by the content which may or may not be acceptable in your application. For me, the result was that the width of the dialog is the only bit of styling that I wanted to, but was not able to, control from my CSS.
As a final note, I should also mention that the application I have been discussing was developed using Ruby on Rails and that there was one nuance to using jQuery with Rails. There are evidently some javascript conflicts created when we include both prototype (which ships with Rails) and jQuery. To work around this your javascript inclusions should look something like this:
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery-1.4.2.min', 'jquery-ui-1.8.6.custom.min' %>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
Subsequently your jQuery calls must use the variable assigned ($j), for example:
$j( content_id ).dialog( { width: dialog_width, modal: true,
buttons: { Cancel: function() {
$j( this ).dialog( "close" ); } }
} );
Note the "j" following the dollar sign ($).
Subscribe to feed