jquery - 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 方法）从我可以看到在调试器中。我完全被难住了，这篇文章中描述的方法仅有助于在对话框第一次打开时显示日期选择器。另一个帖子似乎只与对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 );
}

score 22 · Accepted Answer

在更多的调试和尝试跟踪 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注意：在打开弹出对话框（或请求通过 AJAX）后，我没有“重新初始化” PartialView，因此将单个脚本源作为其中的一部分_Layout.cshtml就足够了。希望这对其他人有帮助。

score 15 · Accepted Answer

我有同样的问题，我解决了

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

关闭并销毁弹出窗口后。

score 6 · Accepted Answer

对我有用的是-

在对话框中，如果我有多个带有 class 的输入datepicker，那么

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

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

我在jquery.ui.datepicker的1.8.18版本上

score 2 · Accepted Answer

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

那么你需要在填充部分视图后再次调用 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
}

score 2 · Accepted Answer

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

问题是我第二次加载对话框，这些会导致问题。解决方案是在关闭对话框后将其删除，例如：

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

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

score 1 · Accepted Answer

您可以通过向 div onclick="focusBlur()"添加一个新函数来做到这一点

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

score 0 · Accepted Answer

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

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

如果您在同一页面中有 2 个地方要加载日期选择器，则必须复制该功能：

$(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”添加到您要调用日期选择器的第二个位置。它有效，几乎对我来说

希望对某人有所帮助，如果您认为这是一个愚蠢的解决方案，请告诉我，我将其删除

祝你今天过得愉快！

score 0 · Accepted Answer

我想在模式关闭后重新初始化日期选择器，因为在第一次试用期间选择的用于设置日期的值仍然存在。所以我不知道为什么，但下面的代码对我不起作用。

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

希望有帮助！类风湿关节炎

score 0 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

0

在 ajax 成功方法上初始化 datepicker。

于 2019-11-22T10:49:13.417 回答

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

10 回答 10

Related

Reference