Jquery datepicker не работает внутри лайтбокса

Question

После того, как некоторые проблемы решены, я получил хитрые вещи. Я использую плагин наложения для 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 Да, это на португальском языке. Просто нажмите диалоговое окно мультфильма в нижней правой части экрана, чтобы увидеть наложение.

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

Я занимаюсь разработкой и тестированием на Ubuntu, Firefox 3.6.7 (Chrome 5 и Opera 10.60).

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

Answer 1

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

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

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

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

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

Answer 2

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

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

jQuery live () не работает с датчиком выбора jQuery UI

Возможно, вам понадобится что-то вроде этого:

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

Answer 3

после просмотра ваших кодов вот что я нашел.

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

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

Answer 4

с лайтбоксом не работает.Это связано с тем, что лайтбокс всегда фокусируется на себе.

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

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

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