2012-07-10 4 views
2

Я придаю DatePicker к входам в глобальный файл сценария с так:DatePicker не работает в Ajax загружена страница

$(document).on("focusin",".datePick", function() { 
      $(this).datepicker({ 
       dateFormat: "dd/mm/yy", 
       changeMonth: true, 
       changeYear: true, 
       onClose: function() { $(this).valid(); } 
      }); 
     }); 

На определенной странице, есть входы (которые будут использоваться с DatePicker) в модальный диалог (также jquery ui), и я вызываю эту страницу через $ .load() и вставляю в div на другой странице.

Код выше работает очень хорошо для статических входов на других страницах, но для scenerio выше, он отлично показывает диалог datepicker, но когда я нажимаю на дату, он выдает ошибку (f не определено) Редактировать: VS2010 выбрасывает «Невозможно для установки значения свойства currentDay: object null или undefined "

Некоторые люди предложили использовать метод live(), но я не хочу использовать устаревший метод. Что мне делать с проблемой?

Заранее спасибо

Ozgu

+0

Можете ли вы создать пример jsFiddle? – j08691

ответ

4

Как уже упоминалось в моем комментарии к ответу TJ VanToll, пока родительский элемент, с которым связан ваш триггер, присутствует во время загрузки DOM, все будет в порядке.

См. Например, this fiddle.

JS:

$(function(){ 
    $(document).on("focusin",".datePick", function() { 
     $(this).datepicker({ 
      dateFormat: "dd/mm/yy", 
      changeMonth: true, 
      changeYear: true, 
      onClose: function() { $(this).valid(); } 
     }); 
    }); 

    $('#focusin').append('<input class="datePick" name="datepicker" />'); 

});​ 

HTML:

<div id="focusin"></div>​ 

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

+0

Я извлекаю всю страницу (которая содержит div div мода, другие материалы и скрипты, которые работают нормально) с $ ("containerDiv"). Load ("thePageWithModalDialog.aspx").Таким образом, div в модульном диалоговом окне отсутствует при загрузке страницы. Скрипты, которые инициализируют диалог и датупик, работают нормально, но просто щелчок по дате не работает. – ozgkrc

+0

Когда я делаю Div статически закодированным, теперь он работает благодаря ответу. – ozgkrc

0

Использование live, delegate или on не работает с виджетами JQuery UI, потому что они отслеживанием состояния плагинов, которые должны быть созданы после необходимого DOM существуют узлы.

Вы можете выполнить то, что ищете, создав экземпляр datepicker после того, как была добавлена ​​дополнительная разметка. Вот пример: http://jsfiddle.net/tj_vantoll/qN8dG/2/.

+0

Это неверно. '.on()' и т. д. будут пузыриться в dom, поэтому, пока вы привязываете обработчик к элементу, который присутствовал при загрузке страницы, он все равно будет срабатывать при событиях, созданных после инициализации DOM. http://jsfiddle.net/dwesm/ – MetalFrog

+0

Вы правы. Я просто понял, что вы не можете использовать 'on', чтобы элементы автоматически становились виджетами, но вы правы, что можете захватывать пузырящиеся события и предпринимать действия. В этом случае ваш подход будет работать, потому что пойманное событие выбрано одним из нативных '' узлов. Этот подход не будет работать для чего-то вроде события datePicker beforeShow, потому что введенный '' еще не является 'ui.datepicker'. –

10

Я испытал эту точную ошибку, и хотя мой ответ не поможет OP, возможно, это поможет другим в будущем.

Я получил это сообщение об ошибке, когда у меня было ID-столкновение с другим элементом на моей странице.

+3

+1 для решения моей проблемы. Ура! –

+0

Doh! Я мог бы поцарапать все мои волосы ... – pfeds

Смежные вопросы