Question

我在这种情况下丢失了jquery datepicker功能......

1-最初我有一个普通的视图，工作正常，有这个日期输入代码......

<input type="text" name="date_start" id="date_start"
                       value="@(Model.TimeStart)" />
<script language="javascript" type="text/javascript">
    $("#date_start").datepicker();
</script>

2-然后，我在部分视图中转换了该视图，该视图动态加载了...

$('#TargetEmptyDiv').load("/MyController/MyAction");

3-部分视图加载正常，数据可以（手动）输入并且一切正常。唯一的问题是jquery datepicker不再有效。我试着在加载后分配它，使用这个......

$('#TargetEmptyDiv').load("/MyController/MyAction",
                          function () { $("#date_start").datepicker(); });

那不起作用。

4-后来我了解到jquery提供了live（）和delegate（）函数，这些函数能够将javascript代码附加到“现在和将来”加载的元素中。所以，我在文档初始化中尝试了这个...

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").live("click", function () { $(this).datepicker(); });
    });
</script>

以及后来......

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").delegate("click", function () { $(this).datepicker(); });
    });
</script>

没有一个工作，可能是因为他们直接引用了“click”事件，但是datepicker被“附加”（如果这是正确的术语）整个元素。

所以，问题是：如何使jquery datepicker适用于动态加载后加载的元素???

谢谢你的时间！

解决：问题是在_Layout.cshtml的底部有这一行...

@Scripts.Render("~/bundles/jquery")

..加载jquery库的缩小版本（已经由我自己引用）。因此，库被加载两次并且无效，产生错误“datepicker（）不是函数”。

只需评论或删除该行，即可完成所有工作！

Answer 1

将以下jQuery放在基本视图中，而不是局部视图

<script>
  $(document).ready(function () { 
      $(document).on('focus', '.datefield', function () {
          $(this).datepicker();
      });
  });
</script>

这在部分视图动态加载和页面加载时有效。

Answer 2

你在＃3中的方法在我看来应该有用，所以看起来你需要做一些调试。试试这个：

如果您使用Firefox（Chrome内置了开发工具）
在代码中添加debugger行（例如，见下文）
使用Chrome或Firebug / Firefox（或任何其他浏览器的开发工具）加载您的页面

应该发生的是您的浏览器将在此时暂停。但是，如果事情没有按预期工作，可能根本就没有达到那个代码，那么你就不会停顿。

如果您暂停，请使用控制台检查$("#date_start")的值; jQuery选择器可能没有抓住你的想法。

以下是您的代码的debugger示例：

$('#TargetEmptyDiv').load("/MyController/MyAction", function () {
    debugger;
    $("#date_start").datepicker();
});

Answer 3

在您的部分页面上说“/ MyController / MyAction”，

部分网页代码：

<div>
    <form>
        <!--Other Elements-->
        <input type="text" id="adate" name="adate" title="date" />
    </form>
    <script type="text/javascript">
        $(document).ready(function(){    
            $( "#adate" ).datepicker();
        });
     </script>
</div>

整页（来自您调用Ajax请求的页面）代码：

<div id="TargetEmptyDiv"></div>
<script type="text/javascript">
function abc(){
$.ajax({
        type: "POST",
        url: "/MyController/MyAction",
        success: function(response)
        { 
            $("#TargetEmptyDiv").html(response);
        }
 });
}
</script>

调用函数abc，你就完成了。假设你已经加载了所有的jquery文件。

Answer 4

在我的情况下，我试图连接日期选择器的日期字段的ID不是我想的那样。我正在使用ViewModels，id的前缀是我的局部视图的ViewModel名称。

机器人的答案让我接受了它。

所以我现在使用Charly的答案，但不是#BirthDate我有#IdentityModel_BirthDate：

<script>
  $(document).ready(function () { 
      $(document).on('focus', '#IdentityModel_BirthDate', function () {
          $(this).datepicker({
              format: 'MM/dd/yyyy',
              changeMonth: true,
              changeYear: true,
              yearRange: "-90:+0"
          });
      });
  });
</script>

Answer 5

所有你需要使日期选择器工作的是步骤1-3。

以下是一个示例： http://jsfiddle.net/delrosario/Xd8py/

你可以在没有动态加载标记的情况下使用datepicker，并且动态版本的伪代码来自步骤1-3。您现在需要检查的是确保在主程序之前加载依赖项（在这种情况下，确保在运行request + datepicker设置之前jquery和jquery ui可用）。

1）加载jquery 2）加载jquery ui 3）等到dom准备好或者包含你的有效载荷的元素准备就绪 4）执行你的主要应用程序，从你的描述中执行步骤1-3。

所以它会是这样的。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="path-jquery-ui-css" />
    <script src="path-to-jquery"></script>
    <script src="path-to-jquery-ui"></script>
    <script id="main_app">
      (function () {
        // wait till dom is ready before executing our code,
        // in this case steps 1-3.
      });
    </script>
  </head>
  <body>
    <div id="datepicker_target">datepicker target</div>
  </body>
</html>

Answer 6

调用ajax后，将jquery连接到'ajaxStop'事件。（见：'@section Scripts'）

$（document）.ajaxStop处理post ajax jquery调用，现在datapicker在ajax调用之后工作。是的......

注意： $（document）.ready ...处理初始页面加载datapicker装饰，但是在ajax表单重新加载后，没有执行datepicker jquery ...

@model Q_Admin.Models.AllQAViewModel

<div id="mainContent">

  @using (Ajax.BeginForm("EAAll","Answer",new AjaxOptions {
    UpdateTargetId = "mainContent",
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace
  }))

  for (int i = 0; i < Model.VMs.Count; i++)
  { 
   @switch (Model.QAVMs[i].qN.Node1.TypeAnswer.AnswerType.Trim().ToUpper())
   {
    case "DATETIME":
      @Html.TextBoxFor(m => m.VMs[i].CurrentNodeText, 
            new { @class = "datepicker", @id = "datepicker" });
      break;
    case "DROPDOWNLIST":
         @Html.DropDownListFor(m => m.QAVMs[i].AnswerRecord.AnswerID,
           new SelectList(Model.QAVMs[i].answerNodes, "ID", "NodeText.Text", Model.QAVMs[i].SelectedNodeID),
          "-- Select an Answer --",
           new { @onchange = "$(this).parents('form:first').find(':submit')[0].click();"   }) }
      break;
    default:
       break;
    }
  }
</div>

@section Scripts{
<script type="text/javascript">
    $(document).ready(function () {
        // debugger;
        $("#datepicker").datepicker(
            {
                dateFormat: "mm/dd/yy",
                constrainInput: true
            });
    });
    $(document).ajaxStop(function () {
        // debugger;
        $("#datepicker").datepicker(
            {
                dateFormat: "mm/dd/yy",
                constrainInput: true
            });
    });
</script>}

Answer 7

我以前遇到过这个问题。在我的情况下，我在页面底部引用了<script src='jQueryUI.js'></script>。将引用移动到页面顶部为我修复了它。

Answer 8

似乎＃3应该有效。但也许你可以尝试像这样的hacky方式：

<script type="text/javascript">
    $(document).ready(function () {
        $(this).on("mousedown", "#date_start", function (e) { 
             $(this).datepicker(); e.preventDefault();$(this).click(); 
        });
    });
</script>

Answer 9

我有这个工作

行动方法：

public ActionResult GetControl()
{
    return View("_partial");
}

主要观点：

<div id="TargetEmptyDiv"></div>

<script type="text/javascript">
    $(function () {
        $('#TargetEmptyDiv').load("/Home/GetControl");
    });
</script>

部分视图：

@{
    Layout = "";
}

<input type="text" name="date_start" id="date_start" />

<script type="text/javascript">
    $(function () {
        $("#date_start").datepicker();
    });
</script>

当然，您必须记住在布局中包含jquery-ui.js

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>

Answer 10

我怀疑你的JS正在执行，但你没有正确引用jquery-ui。我建议在比部分视图更高的级别添加所有jquery库。尝试将<script src="jquery-ui.js">标记放在页面或布局中，而不是局部视图中。如果这不能解决问题，请尝试将alert("test");放入您的javascript代码中，以确保它正在执行。

Answer 11

我遇到了完全相同的问题。如果使用ajax，则将下面的jquery函数绑定到文档。每次执行ajax时，都会触发。在这里查看api文档 - http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$（document）.ajaxComplete（function（）{//这里的代码}）

Answer 12

我遇到了同样的问题，使用之前版本的JQuery-UI解决了。在我的情况下，使用版本1.9.2和1.10.3到JQuery版本1.10.1。知道原因，但我认为最新版本带来了一些紧凑的问题，所以我选择总是落后于过去。我希望它会有用

Answer 13

<script type="text/javascript">$(function () {$("#datefield").datepicker();});</script>

只需使用ajax加载的内容加载此行

Answer 14

嗨：您将以下代码放在部分视图中的加载文档事件脚本标记中：

$(function(){

$("#date_start").datepicker();

})

如何在部分视图中动态加载后使JQuery DatePicker工作？

14 个答案: