After reading an earlier post, it occurred to me I hadn't yet tested
my modal dialog on IE. Upon testing, I discovered several problems.
Let me explain what I am doing:
We will have up to 7 select boxes and text boxes. We want those to
show on the page, but we also want them to show in a modal dialog box,
one dialog for each input. Here is my code:
jQuery(document).ready(function() {
// Create our hidden area for our cloned fields.
$("body").append("<div id='hiddenArea' style='display: none'>");
displayField("firstField");
});
function displayField(fieldId) {
var fieldSel;
var clonedId;
var clonedSel;
var $fieldLabel;
var headerText;
var $fieldDiv;
var $clonedField;
// Since the ID we got doesn't have a "#" in front, let's add one.
fieldSel = "#" + fieldId;
// We clone the field so we can use it in the lightbox, leaving our
original alone.
$clonedField = $(fieldSel).clone(true);
// Change the ID of the cloned field.
clonedId = $(fieldSel).attr('id') + "_cloned";
$clonedField.attr('id', clonedId);
// As we did for our original field ID, add a "#" to the beginning of
our cloned ID.
clonedSel = "#" + clonedId;
// Append our cloned field to a holding area that's hidden so we can
use it.
$clonedField.appendTo('#hiddenArea');
// Get the label for our field. If there isn't one, use the Id for
our header text.
$fieldLabel = $("label[for='" + fieldId + "']");
if( $fieldLabel ) {
headerText = $fieldLabel.text();
} else {
headerText = fieldId;
}
// Get our object here so we can re-use it below. Less jQuery calls,
hopefully.
$fieldDiv = $(clonedSel);
// Display the lightbox.
$fieldDiv.dialog({
open: function(ev, data) {
$(this).trigger('focus');
},
resizable: false,
draggable: false,
position: "center",
title: headerText,
show: "fade",
hide: "fade",
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
});
$fieldDiv.change(function() {
// Get the value they entered and put it back in the original
field.
$(fieldSel).val($fieldDiv.val());
// Destroy the dialog box.
$fieldDiv.dialog("destroy");
// Disable the original field.
$(fieldSel).attr('disabled', 'disabled');
// Display the next field.
displayField(getNextField(fieldId));
})
}
And an example field:
<form action="">
<label for="firstField">Select Type</label>
<select id="firstField" class="dialog">
<option selected value="">--- Type ---</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
</select>
There are several problems with this in IE6. First, if I use show and
hide, I don't always get the dialog's title bar. Second, if I use
open to focus the element, as soon as down arrow is pressed on a
select box, it triggers the change and goes to the next dialog.
Third, the original select boxes are not blocked by the modal window
(though the text boxes are). This is using a customized 1.5.2, so
only the pieces required for dialog are present. On a side note, when
using 1.6rc2 and using show and hide, I don't see any dialog in
Firefox 2.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
