Jquery Dialog box + selection options - Sometime unable to get selection options

[Nitin]

Hello,

I am using Jquery Dialog box which has a select options (drop down).
The dialog is initialially hidden and on some event on main page I
display the dialog. The dialog has couple of buttons Add and Cancel.
On clicking Add I need to check the option selected and process it
accordingly and close the dialog. User can reopen the dialog by firing
the same event on the main page and make another selection and add it.

The problem I am facing is that the first time the dialog is opened
and option selected, I am able to determine the user's selection but
subsquent opening of dialog at times doesn't give be the user
selection. The selection index is -1. This does not happen in all the
time the dialog is reopened by random times. I am unable to figure or
zero down to what is the issue.

Any help/pointers to help me understand what is going wrong and
possible solution to is deeply appreciated.

Nitin

[Richard D. Worth]

Do you have the modal option set to true? Does this happen in multiple browsers? Because it sounds very similar to this issue:

http://dev.jqueryui.com/ticket/4706

If not, it would be great to have this entered as a separate ticket:

http://dev.jqueryui.com/newticket (note: requires registration)

Thanks.

- Richard

[Nitin]

Richard,

Yes my dialog box has modal option set to true. I have only tested
this in IE8 and have not checked it in any other browser for now, as
my application currently works only in IE8.

The problem looks similar to the one you have pointed out. Let me give
more details about the problems I have encountered so far.

Opening and closing the dialog randomly I found that at times the
select box in the dialog does not display any list of items even
though I had set them onload of my main page much before I open the
dialog itself. This again happens randomly (not the first time dialog
opens but subsequent reopens) and I could not figure out any pattern
when the items in select box gets displayed and when not. In order to
put a work around I added beforeClose option for the dialog in which I
reset the select box options of my dialog again with the same options
I set when I load my main page. Since then I have not observed select
box in dialog miss displaying options items when it reopens.

Next I encountered the problem which I have mention below.

In a different dialog box I have encountered another problem (it looks
similar) in which date selected by user using jquery datepicker plug-
in does not update the input box (with which I associate date picker).
Again this does happen randomly (only on reopens and not the first
time).

Is there are any work around of this which I can implement for now?
This help me and any others who need a fix immediately.

Nitin

On Aug 4, 3:17 pm, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> Do you have the modal option set to true? Does this happen in multiple
> browsers? Because it sounds very similar to this issue:http://dev.jqueryui.com/ticket/4706
>
> If not, it would be great to have this entered as a separate ticket:
>

> http://dev.jqueryui.com/newticket(note: requires registration)

>
> Thanks.
>
> - Richard
>
>
>
> On Mon, Aug 3, 2009 at 12:18 PM, Nitin <nitins.shu...@gmail.com> wrote:
>
> > Hello,
>
> > I am using Jquery Dialog box which has a select options (drop down).
> > The dialog is initialially hidden and on some event on main page I
> > display the dialog. The dialog has couple of buttons Add and Cancel.
> > On clicking Add I need to check the option selected and process it
> > accordingly and close the dialog. User can reopen the dialog by firing
> > the same event on the main page and make another selection and add it.
>
> > The problem I am facing is that the first time the dialog is opened
> > and option selected, I am able to determine the user's selection but
> > subsquent opening of dialog at times doesn't give be the user
> > selection. The selection index is -1. This does not happen in all the
> > time the dialog is reopened by random times. I am unable to figure or
> > zero down to what is the issue.
>
> > Any help/pointers to help me understand what is going wrong and
> > possible solution to is deeply appreciated.
>

> > Nitin- Hide quoted text -
>
> - Show quoted text -

[Richard D. Worth]

I would first make sure that the element on which you're calling .dialog() contains a <form> and that these elements are inside that form. To get around a stacking issue in IE, the dialog has to be placed at the end of the body when it's opened, so if that happens and the dialog content element is inside the form instead of the other way around, these elements will moved to the end of the body, outside of any form, which may cause issues.

Otherwise, this may be related to the work being done by modal: true to ensure all elements outside the dialog are inaccessible while it's open. You mention your dialog has the modal option set to true. Could you test with false, and see if this is related? Thanks.

- Richard

[Nitin]

Thanks Richard for prompt reply.

In fact the element I have call on .dialog() has form and all the
elements are inside the form (except the buttons Add and Cancel that
are created by .dialog() buttons option).

I tested with modal option set to false, but encounter the same
issue.

Are there any other options I can try?

- Nitin

> > > - Show quoted text -- Hide quoted text -

[Richard D. Worth]

Create a minimal test page and attach to a new ticket:

http://dev.jqueryui.com/newticket (note: requires registration)

Thanks.

- Richard

[Nitin]

Richard,

I have not been able to reproduce this out side my code and hence have
not filed a ticket for now.

I investigated more today into the my code and found that there are
two more instance of dialogs divs getting added to html body as I
navigate in and out of the page that shows the dialog.

Here is what happens.
I have ajax application and when I navigates to one of the page I
initialize the dialog on document.ready(). When I click a button on
this page I open the dialog. I am able to make selection from
selection box of dialog and close it. Without navigating out of this
page I am able to open dialog select options and close it any number
of times and it works out well.

The problem starts when I navigate out of this page and come back to
it later. At this point document.ready() is initializes the dialog
again and when I open the dialog on clicking button I see select
options sometimes missing and even when options are displayed, the
selection I make the dialog is not correctly determine in the
javascript code. What I observed is the there are two dialog divs. at
the end of the html body. The first one (I presume was the one created
when I nagivated to the page first time) has all the select options.
The second one(got created when I navigated to the page second time)
has no option at all.

I am not sure why are there two dialog divs in the html body. I have
tried calling dialog close and dialog destroy but I end up with the
same result when I navigate in and out of page. Shouldn't the first
dialog div element get removed when I navigated out of the page?

Any insight on what I could possibly be doing wrong and solution to
fix it is deeply appreciated.

-Nitin


On Aug 4, 6:43 pm, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> Create a minimal test page and attach to a new ticket:http://dev.jqueryui.com/newticket(note: requires registration)