Using jQuery Datepicker inside of Floatbox

Page: 1

Author Post
Member
Registered: Sep 2013
Posts: 5
Hi there,

We've been using jQuery's Datepicker inside of a Floatbox instance for a few years now. However, upon preparing to update from version 5.7.2 to version 7.3.3, I'm having issues where interacting with the Datepicker closes the parent Floatbox instance...

I've tried things like preventing propagation to no avail, but I cannot tell what changed between version 5.7.2 and 7.3.3 - the older version seems to simply work better for this instance straight out of the box.

You should be able to see what I mean by visiting, for example:

https://www.sexyjobs.com/floatboxtest.php?fbv=old

compared to:

https://www.sexyjobs.com/floatboxtest.php?fbv=new

The first link loads the old 5.7.2 version, whereas the next link loads the newest 7.3.3 version.

If you click the "Launch Floatbox w/ Datepicker" link, interacting with the Datepicker (selecting a day, changing the month, etc.) closes the Floatbox on the new version, but not the old version. Any help would be very much appreciated!

Thanks!
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for providing clear example pages.

If you set "outsideClickCloses:false" the floatbox will persist after a date is picked.

The definition of what counts as an outsideClick changed somewhere between version 5 and 7. Previously, if the translucent overlay was present then only a click on that overlay counted. Now an outsideClick registers on anything that is not child element of the floatbox container.
Member
Registered: Sep 2013
Posts: 5
Thanks for the quick response!

I think I understand what you mean and actually toyed with the outsideClickCloses option as a workaround (I probably should have mentioned this).

The main issue with setting outsideClickCloses:false is that all other Floatbox popups on the site close with an outsideClick, and we prefer this behavior... Ideally we'd be able to prevent clicking the Datepicker from registering as an outsideClick - so that we can preserve the outsideClick:true behavior - effectively the same way version 5 did. Does that make sense?
Administrator
Registered: Aug 2008
Posts: 3382
Having outsideClickCloses active but not wanting a click on a widget that is outside the floatbox to close it will require some document changes or custom code.

The best (cleanest) solution would be to attach the date selector widget into the floatbox content, then a click on it would not be an outside click. The date widget is currently attaching to the end of the <body> on the main page document.

If there is a facility in that datepicker script to tell it where to attach to the document, it would be best to load it as a child element of the form that contains the input that is in the floatbox. In your example, there is no form, so the attachment point would be the <div> that contains the input.

Not as clean, but also functional, would be to turn off outsideClickCloses for that item and put a custom handler on the translucent overlay to close the box when the overlay is clicked. Something like...
data-fb-options="outsideClickCloses:false afterBoxStart:`fb.addEvent( fb.fbOverlay, ['mouseup', 'touchend'], fb.end )`"
Member
Registered: Sep 2013
Posts: 5
Thanks a lot!

Using one of these solutions, we'll definitely get things working the way we'd like.

Much appreciated.

Page: 1