JQuery DatePicker работает только один раз и не показано во второй раз

Question

ASP.NET MVC3/JQuery 1.9.1/JQuery UI 1.10.2

У меня есть страница, на которой я открыть модальное диалоговое окно после нажатия на Ajax.ActionLink. Внутри этого диалога у меня есть поле ввода и связанный с ним datepicker. Когда я открываю диалог в первый раз, я могу нажать кнопку datepicker (или внутри связанного поля ввода, чтобы он получал фокус, showOn установлен в both), а datepicker показывает, как ожидалось. Я могу, пока модальный диалог открыт, делайте это так часто, как я хочу, датпикер показывает каждый раз. Когда я закрываю модальный диалог (через прикрепленный файл $("ui-widget-overlay").click(function(){...}); и затем снова его открываю, датапикер больше не работает, независимо от того, пытаюсь ли я нажимать на кнопку или в соответствующее поле ввода.

Я попытался отладить jQuery код и оба раза строки выполняемого кода одинаковы (и даже несмотря на то, что датапикер не появляется во второй раз, когда открывается диалог, запускаются методы jQuery) из того, что я вижу в отладчике. м полностью тупик, и методы, описанные в this post только помогли с точки зрения того, чтобы показать Datepicker в первый раз открывает диалоговое окно. Another post только кажется, связано с недоразумением хау showOn настройки работы в.

Я также пытался уничтожить дампикера через $("#datepicker").datepicker("destroy"); при закрытии диалога - безрезультатно. Есть идеи?

Update

На "вызывающему странице":

$(document).ready(function() { 
    $("#popupDialog").dialog(
    { 
     autoOpen: false, 
     modal: true, 
     open: function() 
     { 
      $("ui-widget-overlay").click(function() 
      { 
       $("#popupDialog").dialog("close"); 
      } 
     } 
    }); 
}); 
[...] 
@Ajax.ActionLink("Some text", "Action", "Controller", new AjaxOptions { 
    HttpMethod = "GET", 
    UpdateTargetId = "popupDialog", 
    InsertionMode = InsertionMode.Replace, 
    OnSuccess = "openPopup()" 
}) 
[...] 
function openPopup() 
{ 
    $("popupDialog").dialog("open"); 
} 
[...] 
<div id="popupDialog" style="display: none;"></div> 

Действие контроллер очень прост и выглядит следующим образом:

public ActionResult Action() 
{ 
    MyActionModel myActionModel = new MyActionModel(); 
    return PartialView(myActionModel); 
} 

Answer 1

После более отладки и попытки проследить события JQuery, я проверил существует ли проблема с JQuery UI 1.9.2, который он не сделал. Затем я сравнил соответствующие строки кода datepicker, которые не включали слишком много фактических изменений.

Короче говоря, проблема, описанная в моем вопросе выше, может быть исправлена ​​путем изменения одной строки кода с 1.10.2 до того, что было в 1.9.2:

1.10.2, вызывающие проблемы

/* Initialise the date picker */ 
if (!$.datepicker.initialized) { 
    $(document).mousedown($.datepicker._checkExternalClick); 
    $.datepicker.initialized = true; 
} 

1.9.2. версия, работает, как ожидалось

/* Initialise the date picker */ 
if (!$.datepicker.initialized) { 
    $(document).mousedown($.datepicker._checkExternalClick) 
     // !!!!!!!!!! 
     // The next code line has to be added again so that the date picker 
     // shows up when the popup is opened more than once without reloading 
     // the "base" page. 
     // !!!!!!!!!! 
     .find(document.body).append($.datepicker.dpDiv); 
    $.datepicker.initialized = true; 
} 

Я до сих пор не знаю, почему это поведение существует, но это, кажется, относительно редкое созвездие. В качестве примечания: я не «повторно инициализовал» datepicker после открытия всплывающего диалогового окна (или запросил PartialView через AJAX), поэтому достаточно одного источника сценария как части _Layout.cshtml. Надеюсь, это помогает кому-то другому.

Answer 2

Он открыт с помощью Ajax .ActionLink, который обновляет целевой идентификатор (div) через свойство UpdateTargetId. Действие контроллера, возвращающее содержимое для модального диалога, запрашивает веб-службу, а затем возвращает частичное представление с заполненной моделью.

, то вам необходимо вызвать функцию datepciker снова после того, как частичный вид заполняется ... внутри функции обратного вызова AJAX (если вы используете это) ...

$.ajax({ 
    success:function(){ 
     //your stuff 
     $("#datepicker").datepicker(); 
    } 
}); 

datepikcker вон «Невозможно вызвать функцию для динамически добавленного элемента ... так как ваш целевой div не присутствует в то время, когда вы выбираете datepicker ... вам нужно снова вызвать функцию datepicker для того, чтобы работать для добавления целевой DIV

обновленный

OnSuccess = "openPopup()" 
    ..... 

function openPopup(){ 
    //your codes 
    $("#datepicker").datepicker(); //call date picker function to the added element again 
} 

Answer 3

У меня была аналогичная проблема, но со мной случилось то, что во второй раз диалог был загружен, datapicker не принял значение.

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

$("#popupDialog").dialog("close");  
    $("#popupDialog").remove(); 

Я надеюсь, что это помогает кто-нибудь!

Answer 4

То, что сработало для меня было -

Внутри диалога, если у меня есть несколько входов с классом datepicker, то

$(".datepicker").removeClass('hasDatepicker').datepicker(); 

В основном, чтобы удалить класс hasDatepicker перед инициализацией datepicker снова.

Я был на версии 1.8.18 из jquery.ui.datepicker

Answer 5

У меня была такая же проблема, и я решил с

$("#ui-datepicker-div").remove(); 

после закрытия и уничтожения всплывающего окна.

Answer 6

btw Я попытаюсь объяснить, как я его решил, потому что я думаю, что это проще.

Я не специалист в этом деле, поэтому простите меня, если я не буду использовать правильные термины, чтобы объяснить это.

если и есть 2 места в одной и той же странице и хотите загрузить DatePicker, у меня, чтобы дублировать функции:

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.png", 
     buttonImageOnly: true, 
     buttonText: "Select date", 
     addClass:".ccCFcalV2" 
    });  
});  

$(function() { 
    $("#datepicker2").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.png", 
     buttonImageOnly: true, 
     buttonText: "Select date", 
     addClass:".ccCFcalV2" 
    }); 
}); 

и добавить класс «DATEPICKER2» на второе место и хотите, чтобы вызвать DatePicker , он работает, почти для меня

Надеются, что это поможет кому-то, если и считать это бессловесным решением, дай мне знать, и я удалю его

имеет хороший день!

Answer 7

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

$(selector).datepicker("refresh") 

Вышеупомянутая строка, упомянутая в документации, не помогла !.

Следующее - это то, что я пытался, чтобы уничтожить и повторно инициализировать объекты выбора даты.

$('#addPromoModal').on('hide.bs.modal', function(event) { 
$("#startDate").datepicker("destroy"); 
$("endDate").datepicker("destroy"); 
initialiseDataPicker(); } 

Вот моя Initialise функция:

function initialiseDataPicker(){ 

$("#startDate").datepicker({ 
    defaultDate: "+1w", 
    showWeek: true, 
    firstDay: 1, 
    changeMonth: true, 
    // numberOfMonths: 3, 
    onClose: function(selectedDate) { 
    $("#endDate").datepicker("option", "minDate", selectedDate); 
    } 
}); 
$("#endDate").datepicker({ 
    defaultDate: "+1w", 
    showWeek: true, 
    firstDay: 1, 
    changeMonth: true, 
    // numberOfMonths: 3, 
    onClose: function(selectedDate) { 
    $("#startDate").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
} 

Надежда, что помогает! RA