Jquery datepicker does not work inside lightbox - solved

Question

Hi again,

after some problems solved, I got a tricky stuff. I am using an overlay plugin for Jquery called prettyPhoto.

Just wanna make an overlay with a form. The form is hidden with CSS, and when a link is clicked, the overlay shows it in a nice fashion. So far so good, everything working as expected, except only one thing: this form has a date field, in which I use datepicker UI.

It (the datepicker) does no shows up at all. At first, I tryed googling and making some CSS adjustments... nothing works. Z-index on CSS, z-index dinamically...

Then I used Firebug to keep an eye. Datepicker usually sets its properties just when the listener element is clicked, dinamically. On this form inside the overlay, when I click the listener field, the datepicker div does not change at all.

Any ideas on how get this working?

Thx in advance.

References: site is: http://davedev.com.br/projects/jdc/v1/pt/reserva.php Yes, it is in portuguese. Just click the cartoon dialog box on bottom right side of screen to see the overlay.

I am using google apis CDN for jquery and jquery-ui.

I am developing and testing upon Ubuntu, Firefox 3.6.7 (Chrome 5 and Opera 10.60).

And yes, I am using some HTML5 elements and some CSS3 effects (the cartoon dialog baloon is fully made with CSS3. No images. =]).

Answer 1

after looking into your codes, here's what I found.

It seems that you binded the datepicker correctly on the popup form. The problem is, when you initialize the prettyphoto, the binded datepicker is not anymore binded. If you can look at firebug and watch closely on <div id="pp_full_res"></div>, that's where your form goes. What happen now, is when you open/close the popup, the form gets remove or added to the DOM. That's the problem.

One solution I can think is for you to use another overlay plugin.

Answer 2

Your overlay plugin 'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox.

Here is one person who had the same problem:

http://stackoverflow.com/questions/2386718/jquery-live-failing-with-jquery-ui-datepicker

You'll probably need something like this:

$('#overlayData').live('click', function (){
  $(this).datepicker({dateFormat: 'dd/mm/yy'});
});