In the event handler on the open() and close() events, the dialog's
state hadn't yet changed when I'd thought it did. For example:
$('#mapLegendDialog').dialog(
{
// other stuff removed for brevity
open: function() {
console.log($('#mapLegendDialog').dialog('isOpen'));
},
close: function() {
console.log($('#mapLegendDialog').dialog('isOpen'));
}
});
will print false when the dialog is opened, and true when the dialog
is closed. On the other hand, using setTimeout on the log() call will
swap this:
$('#mapLegendDialog').dialog(
{
// other stuff removed for brevity
open: function() {
setTimeout(function(){console.log($('#mapLegendDialog').dialog
('isOpen'));}, 50);
},
close: function() {
setTimeout(function(){console.log($('#mapLegendDialog').dialog
('isOpen'));}, 50);
}
});
prints true when the dialog is opened and false when it's closed. This
is the behavior I would expect, given that there's a separate
beforeclose event handler.
Why is it that the close() event handler is called before dialog
('isOpen') would return false? Right now it seems that the handlers
are called during some awkward "during open" or "during close"
process, rather than strictly before or after.
At any rate, I was able to figure out an okay workaround. It's not
ideal but it's the best I was able to get. http://jsbin.com/umocu/
On Oct 20, 10:58 am, Matt Ball <[email protected]> wrote:
> Would you mind linking to a jsbin example of this? I made the changes
> you suggested, but, in addition to the dialog positions not being set
> correctly, it still exhibits the original problem.
>
> On Oct 19, 3:22 pm, "J.C." <[email protected]> wrote:
>
> > I'd change your filterButton click handler to the following:
> > $('#filterButton').click(function(event)
> > {
> > event.stopPropagation();
> > $('#filterDialog').dialog('open');
> > setFilterDialogPosition();});
>
> > and I'd make a similar modification to your legendButton click handler.
>
> > Doing so has the page functioning as expected in my test.
>
> > On Mon, Oct 19, 2009 at 11:39 AM, Matt Ball <[email protected]> wrote:
>
> > > I set up a test on jsbin that exactly reproduces the problem. Please
> > > have a look.
>
> > >http://jsbin.com/eqaba/
>
> > > To reproduce, open both dialogs (order doesn't matter), and then close
> > > the filter dialog by clicking the "x" or "OK" button.
> > > If you then click the "filter" button, it brings both dialogs back.
>
> > > To see the source HTML and Javascript:http://jsbin.com/eqaba/edit
>
> > > Thanks,
> > > Matt
>
> > > On Oct 16, 8:44 pm, "Richard D. Worth" <[email protected]> wrote:
> > >> Doesn't sound like anything I've seen. You mention you have two dialogs
> > >> in a
> > >> jQuery UI Tab. Does the issue persist if you remove the tabs and just
> > >> have
> > >> two dialogs. Would be great if you could put together a minimal test page
> > >> demonstrating the problem. If you don't have a way to host the page
> > >> publicly, please post to jsbin.com:http://jsbin.com/
>
> > >> Thanks.
>
> > >> - Richard
>
> > >> On Fri, Oct 16, 2009 at 2:48 PM, Matt Ball <[email protected]> wrote:
>
> > >> > I have two dialogs that live in one jQuery UI Tab. The pre-init markup
> > >> > for the two dialogs:
>
> > >> > <div style="display: none;" id="filterDialog">
> > >> > <div>
> > >> > <input type="checkbox" checked="checked" value="AO"
> > >> > name="type"/>AO<br/>
> > >> > <input type="checkbox" checked="checked" value="AR"
> > >> > name="type"/>AR<br/>
> > >> > <input type="checkbox" checked="checked" value="HQ"
> > >> > name="type"/>HQ<br/>
> > >> > <input type="checkbox" checked="checked" value="PR"
> > >> > name="type"/>PR<br/>
> > >> > <input type="checkbox" checked="checked" value="RS"
> > >> > name="type"/>RS<br/>
> > >> > <input type="checkbox" checked="checked" value="SS"
> > >> > name="type"/>SS<br/>
> > >> > <input type="checkbox" checked="checked" value="TT"
> > >> > name="type"/>ST
> > >> > </div>
> > >> > </div>
>
> > >> > <div style="display: none;" id="legendDialog">
> > >> > <table id="legendTable">
> > >> > <tbody>
> > >> > <tr><td style="background-color: rgb(70, 132, 238); width:
> > >> > 1.5em;"/><td>AO</td></tr>
> > >> > <tr><td style="background-color: rgb(220, 57, 18); width:
> > >> > 1.5em;"/><td>AR</td></tr>
> > >> > <tr><td style="background-color: rgb(0, 0, 0); width:
> > >> > 1.5em;"/><td>HW</td></tr>
> > >> > <tr><td style="background-color: rgb(255, 153, 0); width:
> > >> > 1.5em;"/><td>PR</td></tr>
> > >> > <tr><td style="background-color: rgb(25, 142, 71); width:
> > >> > 1.5em;"/><td>RS</td></tr>
> > >> > <tr><td style="background-color: rgb(153, 0, 153); width:
> > >> > 1.5em;"/><td>SS</td></tr>
> > >> > <tr><td style="background-color: rgb(38, 216, 197); width:
> > >> > 1.5em;"/><td>TT</td></tr>
> > >> > </tbody>
> > >> > </table>
> > >> > </div>
>
> > >> > Here's how I initialize the dialogs:
>
> > >> > $('#filterDialog').dialog({
> > >> > title: 'Filter',
> > >> > width: 200,
> > >> > autoOpen: false,
> > >> > draggable: true,
> > >> > resizable: false,
> > >> > buttons: {
> > >> > 'OK': function(){ $('#filterDialog').dialog('close'); }
> > >> > }
> > >> > });
>
> > >> > $('#legendDialog').dialog({ title: 'Filter', width: 200, autoOpen:
> > >> > false, draggable: true, resizable: false });
>
> > >> > Each dialog is opened by clicking a button:
>
> > >> > $('filterButton').click(function(event) { $('#filterDialog').dialog
> > >> > ('open'); });
> > >> > $('#legendButton').click(function(event) { $('#legendDialog').dialog
> > >> > ('open'); });
>
> > >> > The problem is this: if both dialogs are open simultaneously, closing
> > >> > #filterDialog (by clicking the "x" button, or the "ok" button) also
> > >> > closes #legendDialog. Once this happens, if I click the button to open
> > >> > #filterDialog again, both dialogs are opened. Closing #legendDialog
> > >> > does not cause any incorrect behavior.
>
> > >> > All of the initialization for the filter button and dialog runs before
> > >> > all of the initialization code for the legend button and dialog.
> > >> > Reversing the order does not affect the inconsistent behavior
> > >> > described above.
>
> > >> > Has anyone else had similar problems, or have suggestions about what
> > >> > might be going wrong? I've written a workaround for now, but it's a
> > >> > hack and isn't a good solution to the underlying problem.
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
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
-~----------~----~----~----~------~----~------~--~---
