Skip to main content

Search and Top Navigation

#5498 closed bug (fixed)

Opened April 09, 2010 12:15PM UTC

Closed October 16, 2012 01:51PM UTC

Last modified February 27, 2013 02:37AM UTC

Dialog: modal dialog causes datepicker link clicks to follow # in IE

Reported by: vitko555 Owned by:
Priority: major Milestone: 1.7.2
Component: ui.dialog Version: 1.8
Keywords: modal Cc:
Blocked by: Blocking:
Description

See http://forum.jquery.com/topic/modal-dialog-with-datepicker

We have a modal dialog (actually it is a modal form) with a datepicker on it (jquery-ui version of 1.8. and jquery of 1.4.). Everything works fine, except when user selects a date on a datepicker, the anchor part of the URL (everything after the #) is cleared. This is a major problem because this part of the URL should not be changed when user selects date on modal dialog.

For your notice, anchor part is not changed, if datepicker is used without modal dialog (on base page). And also, the behaviour described above was not observed with jquery-ui version of 1.7.2 (but there are other problems with datepicker and modal dialog, like z-index - datepicker is shown behind dialog).

Please see this issue on: http://jsbin.com/iceco3

I found following thing. This bug can only be reproduced in IE (I am using IE8), but in Google Chrome everything works fine.

Attachments (0)
Change History (15)

Changed April 09, 2010 12:16PM UTC by rdworth comment:1

Possibly related to #4453 - UI Datepicker inside UI Dialog Issue ?

Changed April 30, 2010 09:45PM UTC by froemken comment:2

I can confirm this problem. But I can't confirm that this problem is related to issue #4453. #4453 should be fixed with SVN 3762. I just downloaded Version 4003 from SVN and packed dialog and datepicker js-file into my website. But the problem isn't solved.

Changed May 12, 2010 05:00AM UTC by watanabe comment:3

'dialog overlay' may have something to do with this problem.

It seems a 'modeless' dialog with a datepicker works fine in IE.

Test Code:

jQuery UI 1.8.1

jquery.ui.dialog.js

line 692(ui.dialog.overlay.create)

// return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ);
// only for test.

seems to work.

But I don't know how to work around this problem.

Changed September 07, 2011 12:48PM UTC by scottgonzalez comment:4

keywords: → modal

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:5

milestone: 1.9.01.10.0

Changed October 16, 2012 01:51PM UTC by bchiasson comment:6

resolution: → fixed
status: newclosed

The issue was resolved in jquery 1.7.2 per the reporter. The datepicker behind a dialog is being resolved in another ticket.

Changed October 16, 2012 02:02PM UTC by bchiasson comment:7

milestone: 1.10.01.7.2

Changed February 09, 2013 06:55PM UTC by devesh comment:8

While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine.

Changed February 09, 2013 10:23PM UTC by tj.vantoll comment:9

Replying to [comment:8 devesh]:

While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine.

Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59.

Changed February 09, 2013 10:25PM UTC by tj.vantoll comment:10

#9074 is a duplicate of this ticket.

Changed February 10, 2013 11:02AM UTC by devesh comment:11

Replying to [comment:9 tj.vantoll]:

Replying to [comment:8 devesh]: > While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine. Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59.

I have provided the reduced test case here http://jsbin.com/iceco3/61/ . Scroll the dialog box to reach the last Select Date textbox which is attached with datepicker . I think the problem is only reproduced when the Content inside dialog box is so large that you need to scroll to reach the date picker. It is only in IE ( I tested in IE 10 and chrome).

Changed February 11, 2013 02:24AM UTC by tj.vantoll comment:12

Replying to [comment:11 devesh]:

Replying to [comment:9 tj.vantoll]: > Replying to [comment:8 devesh]: > > While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine. > > Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59. I have provided the reduced test case here http://jsbin.com/iceco3/61/ . Scroll the dialog box to reach the last Select Date textbox which is attached with datepicker . I think the problem is only reproduced when the Content inside dialog box is so large that you need to scroll to reach the date picker. It is only in IE ( I tested in IE 10 and chrome).

I am not seeing the hash portion of the URL disappearing as is described in this issue. I am however seeing that focus is being given to the first element in the dialog after a date is selected - http://jsbin.com/iceco3/64. Is that the problem you're having?

That issue is caused by #7765; focus should go back into the textbox after a date is selected.

Changed February 11, 2013 05:21AM UTC by devesh comment:13

Replying to [comment:12 tj.vantoll]:

Replying to [comment:11 devesh]: > Replying to [comment:9 tj.vantoll]: > > Replying to [comment:8 devesh]: > > > While working with the latest release of jQuery UI 1.10.0 , I have found that the issue has started appearing again. When I switched to jQuery UI 1.9.2 the issue was not found. The issue is same when you use the jquery UI without modal = true it is working fine. > > > > Please provide a reduced test case that shows this issue. I'm not seeing it with 1.10.0 - http://jsbin.com/iceco3/59. > I have provided the reduced test case here http://jsbin.com/iceco3/61/ . Scroll the dialog box to reach the last Select Date textbox which is attached with datepicker . I think the problem is only reproduced when the Content inside dialog box is so large that you need to scroll to reach the date picker. It is only in IE ( I tested in IE 10 and chrome). I am not seeing the hash portion of the URL disappearing as is described in this issue. I am however seeing that focus is being given to the first element in the dialog after a date is selected - http://jsbin.com/iceco3/64. Is that the problem you're having? That issue is caused by #7765; focus should go back into the textbox after a date is selected.

I agree , the problem is related to focus going back to first element. So I will vote up on #7765 and wait for that one to fix.

Changed February 26, 2013 06:48PM UTC by mica comment:14

I have a smiliar behaviour with jquery-ui ver. 1.10.0 and datepicker concerning multiple dateinputs within a modal dialog. When using ui 1.9.2 everything works fine. Have a look at: http://jsbin.com/iceco3/67 and tryout the second inputfield (finally, change jquery ui to 1.9.2 to get it work)

System: Firefox 18, Win7

Changed February 27, 2013 02:37AM UTC by tj.vantoll comment:15

Replying to [comment:14 mica]:

I have a smiliar behaviour with jquery-ui ver. 1.10.0 and datepicker concerning multiple dateinputs within a modal dialog. When using ui 1.9.2 everything works fine. Have a look at: http://jsbin.com/iceco3/67 and tryout the second inputfield (finally, change jquery ui to 1.9.2 to get it work) System: Firefox 18, Win7

This was fixed in 1.10.1 - http://jsbin.com/iceco3/69.