DateTimePicker在模態彈出不再顯示取消後

我使用由Trent Richardson在模式彈出窗口中創建的DateTimePicker插件來選擇歸檔項目的日期。當模式彈出時所有工作正常。在這種模式下，我有兩個按鈕：存檔和取消。如果我選擇一個日期並按存檔，一切運作良好，並在下一個彈出窗口，datetimepicker工作正常。但是，如果我按取消，下次使用彈出窗口時，datetimepicker不起作用。最奇怪的是，我有另一個彈出窗口顯示也有datetimepicker存檔的項目。如果我在彈出式窗口中取消操作，日期提示器將不會在任何彈出窗口中顯示。DateTimePicker在模態彈出不再顯示取消後

下面的代碼的JavaScript來初始化彈出：

var modalBackground = $("#modalBackground"); 
var Notifications_ArchiveHolder = $("#Notifications_ArchiveHolder"); 
var Notifications_ShowArchivePopupHolder = $("#Notifications_ShowArchivePopupHolder"); 
var ArchiveURL = "@Url.Action("Archive")"; 
var ShowArchiveUrl = "@Url.Action("ShowArchive", "Notifications")"; 

function ArchivePopup() {   
    $.get(ArchiveURL, function (content) { 
     if (Notifications_ArchiveHolder.html().length <= 10) { 
      Notifications_ArchiveHolder.html(content);     
     } 
    }) 
    InitArchivePopup(); 
} 

function InitArchivePopup() {  
    modalBackground.show(); 

    //set up positon 
    var h = $(window).height(); 
    var w = $(window).width(); 
    var hh = Notifications_ArchiveHolder.height(); 
    var hw = Notifications_ArchiveHolder.width(); 
    var posx = (h/2) - 100; 
    var posy = (w/2) - 200; 
    Notifications_ArchiveHolder.css("position", "fixed"); 
    Notifications_ArchiveHolder.css("top", posx); 
    Notifications_ArchiveHolder.css("left", posy);      

    Notifications_ArchiveHolder.show(); 

    $("body").css("overflow", "hidden"); 
} 

function Cancel_Archive() { 
    Notifications_ArchiveHolder.hide(); 
    Notifications_ArchiveHolder.html(""); 
    modalBackground.hide(); 
}

一個div用於背景和另一個主機彈出：

<div id="modalBackground" class="graphicScreen" style="display: none; position: fixed; top: 0px; left: 0px;"></div> 
<div id="Notifications_ArchiveHolder" style="background-color: white; display: none; z-index: 9999;"></div>

和代碼用於在呈現的局部視圖彈出：

<link rel="stylesheet" href="@Url.Content("~/Resources/styles/Notifications/NotificationsPage.css")" /> 

@using (@Html.BeginForm("Archive", "Notifications", FormMethod.Post)) 
{ 
<div class="popupTitle"> 
    Archive notifications 
</div> 

<div class="popupNotifications"> 
    <span>Archive to date (inclusive)</span> 
    <input type="text" name="olderThan" id="chooseDate" /> 
</div> 
<div style="margin: 15px"> 
    <input class="goVariant" type="submit" value="Archive" /> 
    <input id="cancelBtn" class="goVariant" type="button" value="Cancel" onclick="Cancel_Archive()" /> 
    @*<div class="tooltip_Holder" keyword="notif_admin_archive" onclick="showToolTip();"></div>*@ 
</div> 
} 

<link href="@Url.Content("~/Resources/styles/jquery-ui-timepicker-addon.css")" rel="stylesheet" /> 
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-1.9.1.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui-timepicker-addon.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Resources/JQuery/DateTimePicker/jquery-migrate-1.2.1.js")"></script> 

<script> 
$(document).ready(function() { 
    $('#chooseDate').datetimepicker(); 
}) 
</script>

任何想法將不勝感激。

來源

2013-08-01 Octavian Epure

其中是Cancel_Archive（）函數jquery？ –

只是滾動，你會看到它 –

徹底清理腳本文件後（不再從局部視圖中傳遞它們），它將它整理出來。

來源

2013-08-19 12:41:21

請嘗試使用以下代碼。當你在模態中加載內容時，你需要使用可以使用下面的代碼實現的實時功能。

$('body').on('click','#chooseDate',function(){ 
    $(this).datetimepicker(); 
});

來源

2013-08-01 07:33:35

感謝您的快速回復。它不起作用。我設法找到了一個解決方法：我只加載彈出窗口的內容一次，當我關閉彈出窗口時，我不再從包含的div中清除彈出窗口的html。有用。 –

現在，它適用於一個彈出窗口，但不適用於兩者：如果我取消一個彈出窗口並重新顯示它，datetimepicker會顯示，但其他彈出窗口中的datetimepicker將不再顯示，直到我刷新頁面。 –

DateTimePicker在模態彈出不再顯示取消後

回答

相關問題