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代码，并且两次运行的代码行都是相同的（即使第二次打开对话框时没有显示datepicker，也会触发jQuery方法）我可以在调试器中看到。我完全被难倒了，this post中描述的方法仅在第一次打开对话框时显示日期选择器方面有所帮助。 Another post似乎只是误解了showOn设置的工作原理。

我还试图在关闭对话框时通过$("#datepicker").datepicker("destroy");销毁日期选择器 - 无济于事。有什么想法吗？

更新

在“呼叫页面”上：

$(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;
}

我仍然不确定为什么会出现这种行为，但它似乎是一个相对罕见的星座。注意：在打开弹出对话框（或通过AJAX请求datepicker）后，我没有“重新初始化”PartialView，因此在_Layout.cshtml中有一个脚本源足够了。希望这有助于其他人。

Answer 2

我遇到了同样的问题，我用

解决了

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

关闭并销毁弹出窗口后。

Answer 3

对我有用的是 -

在对话框内，如果我有多个类datepicker的输入，那么

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

基本上，要在再次初始化hasDatepicker之前删除课程datepicker。

我在 jquery.ui.datepicker的版本1.8.18

Answer 4

它通过Ajax.ActionLink打开，它通过UpdateTargetId属性更新目标id（div）。返回模态对话框内容的控制器操作查询Web服务，然后返回带有填充模型的局部视图。

然后你需要在填充局部视图之后再次调用datepciker函数

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

datepikcker将无法为动态添加的元素调用函数...因为在首次调用datepicker时你的目标div不存在...你需要再次调用datepicker函数来获取if为增加的目标DIV工作

<强>更新

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

Answer 5

我遇到了类似的问题，但发生在我身上的事情是，第二次加载对话框时，数据贴图没有取值。

问题是我第二次加载对话框并导致问题。解决方案是关闭对话框之后删除对话框，如：

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

我希望这对任何人都有帮助！

Answer 6

您可以通过向div onclick =“ focusBlur（）”

添加新功能来实现此目的

<script>
    function focusBlur() {
        $('input').blur();
    }
</script>

Answer 7

顺便说一句，我会尝试解释我解决它的方式，因为我认为这样更容易。

我不是这方面的专家，所以如果我不使用正确的术语来解释它，请原谅我。

如果你在同一页面中有两个位置你想加载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 8

我希望在模态关闭后重新启动日期选择器，因为在第一次试用期间选择的值设置日期仍然存在。所以我不知道为什么，但以下代码对我不起作用。

$(selector).datepicker("refresh")

文档中提到的上述行没有帮助！。

以下是我尝试过的东西，即破坏和重新启动日期选择器对象。

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

这是我的初始化函数：

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

Answer 9

如果您需要在同一视图中显示多个日历，并且只显示一次，请尝试以下操作：

document.getElementById("div_Validade").onclick = function () { SetZIndex() };

function SetZIndex() {
    document.getElementById("ui-datepicker-div").style.zIndex = "999999";
}

div_Validade对应于放置输入的div ID，

ui-datepicker-div是未显示的基础设施元素。

Answer 10

在ajax成功方法上初始化日期选择器。

jQuery datepicker只能工作一次，第二次不显示

10 个答案: