JQuery Datepicker не работает внутри Лайтбокс

Question

После того, как некоторые проблемы решены, я получил сложный материал. Я использую плагин overlay для JQuery, называемый prettyPhoto.

Просто сделайте оверлей с формой. Форма скрыта с помощью CSS, и когда щелкнули ссылку, наложение показывает ее красиво.

Пока все хорошо, все работает как ожидалось, кроме одного: эта форма имеет поле даты, в котором я использую пользовательский интерфейс datepicker.

Это (датапикер) вообще не появляется. Сначала я попытался выполнить поиск в Google и внесение некоторых настроек CSS ... ничего не работает. z-index на CSS, z-index динамически ...

Затем я использовал Firebug, чтобы следить. Datepicker обычно устанавливает свои свойства только тогда, когда элемент прослушивателя щелкает динамически. В этой форме внутри наложения, когда я нажимаю поле слушателя, div datepicker вообще не изменяется.

Любые идеи о том, как это работает?

Ссылки: сайт является: http://davedev.com.br/projects/jdc/v1/pt/reserva.php Да, это в португальском языке. Просто нажмите диалоговое окно мультфильма в нижней правой части экрана, чтобы увидеть оверлей.

Я использую google apis CDN для jquery и jquery-ui.

Я разрабатываю и тестирую Ubuntu, Firefox 3.6.7 (Chrome 5 и Opera 10.60).

И да, я использую некоторые элементы HTML5 и некоторые эффекты CSS3 (шар из мультяшного диалога полностью выполнен с CSS3. Нет изображений. =]).

Answer 1

Ваш плагин overlay 'prettyPhoto' создает новый DOM каждый раз, когда он запускается, поэтому событие «focus», к которому привязано datepicker, не существует в элементе DOM в вашем лайтбоксе.

Вот один человек, который имел такую ​​же проблему:

jQuery live() failing with jQuery UI datepicker

Вы, вероятно, нужно что-то вроде этого:

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

Answer 2

после изучения ваших кодов, вот что я нашел.

Кажется, что вы правильно привязали фишку даты в всплывающей форме. Проблема в том, что при инициализации prettyphoto привязанный datepicker больше не привязан. Если вы можете посмотреть на Firebug и внимательно посмотреть на <div id="pp_full_res"></div>, вот где ваша форма. Что происходит сейчас, когда вы открываете/закрываете всплывающее окно, форма удаляется или добавляется к DOM. Это проблема.

Одно решение, я могу думать, это использовать другой плагин наложения.

Answer 3

Используя предложенное решение здесь мне удается сделать DatePicker появляется/исчезает в лайтбокс (prettyphoto), но все же с ошибкой javascript (f равно null) при выборе даты.

Через несколько часов здесь мое полное решение:

$("#datepicker").live('focus', function(){ 
       $(this).attr("id","datepickerNEWID");     
       $(this).datepicker(); 
}); 

Поскольку Lightbox создает новый DOM с копией содержимого сНа мы тогда имеют 2 входа с тем же идентификатором, который вызывает DatePicker, чтобы не работать, так что я do - это изменение идентификатора datepicker.

Надеюсь, это поможет!

Answer 4

с помощью лайтбоксов doest не работает. Это потому, что лайтбокс всегда обеспечивает фокусировку на себе.

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 

$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 

$confModal.on('hidden', function() { 
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
});