8

在这种情况下，我失去了 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() 不是函数”。

只需评论或删除该行，一切正常！

4

14 回答 14

4

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

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

这将在动态加载局部视图和页面加载时起作用。

于 2014-06-05T01:26:52.670 回答
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 文件。

于 2013-01-09T14:33:07.113 回答
3

您在#3 中的方法在我看来应该有效，因此您似乎需要进行一些调试。尝试这个：

  1. 如果您使用 Firefox，请获取 Firebug 扩展程序（Chrome 内置了开发工具）
  2. 在您的代码中添加debugger一行（参见下面的示例）
  3. 使用 Chrome 或 Firebug/Firefox（或任何其他浏览器的开发工具）加载您的页面

应该发生的是您的浏览器将在此时暂停。但是，如果事情没有按您预期的那样工作，那么它可能根本没有命中该代码，然后您就不会停下来了。

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

这是debugger您的代码示例：

$('#TargetEmptyDiv').load("/MyController/MyAction", function () {
    debugger;
    $("#date_start").datepicker();
});
于 2012-12-28T20:27:58.743 回答
2

就我而言，我试图将日期选择器连接到的日期字段的 ID 并不是我认为的那样。我正在使用 ViewModels，并且 id 以我的局部视图的 ViewModel 名称为前缀。

machineghost的回答让我明白了。

所以我现在使用查理的答案，但不是#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>
于 2017-09-13T14:29:19.730 回答
1

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

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

您可以在不动态加载标记的情况下让 datepicker 工作，并且动态版本的伪代码在步骤 1-3 中是正确的。您现在需要检查的事情是确保在您的主程序之前加载您的依赖项（在这种情况下，请确保在运行请求 + 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>
于 2013-01-09T09:20:57.167 回答
1

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

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

注意： $(document).ready... 处理初始页面加载数据选择器装饰，但是在重新加载 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>}
于 2014-01-21T06:52:42.550 回答
0

I had the exact same problem. If using ajax, then bind the below jquery function to the document. Each time ajax is executed, this will fire. Check out the api doc here - http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$(document).ajaxComplete(function (){//your code here})

于 2013-05-29T03:08:57.637 回答
0

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

于 2013-01-07T18:11:24.660 回答
0

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

<script type="text/javascript">
    $(document).ready(function () {
        $(this).on("mousedown", "#date_start", function (e) { 
             $(this).datepicker(); e.preventDefault();$(this).click(); 
        });
    });
</script>
于 2013-01-02T18:56:25.790 回答
0

我有同样的问题，使用以前版本的JQuery-UI. 在我的情况下，使用版本1.9.2和版本。知道原因，但我觉得最新的版本带来了一些紧凑性的问题，所以我选择使用总是倒退到过去。我希望它会有用1.10.3JQuery1.10.1

于 2013-07-16T15:59:32.073 回答
0

我有这个工作

行动方法：

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>
于 2013-01-05T19:25:23.933 回答
0

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

于 2012-12-28T22:33:34.900 回答
-1 
<script type="text/javascript">$(function () {$("#datefield").datepicker();});</script>

只需将此行与您必须通过 ajax 加载的内容一起加载

于 2014-08-09T07:18:06.780 回答
-1

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

$(function(){

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

})
于 2015-07-24T18:31:36.057 回答