使用 ajax.actionlink 加载/更新的 div 内的 ASP.NET MVC.NET JQueryUI datepicker

Question

我正在尝试将 jqueryUI 的 datepicker 合并到一个局部视图中，如下所示：

  <% using (Ajax.BeginForm("/EditData", 
                            new AjaxOptions { HttpMethod = "POST", 
                                             UpdateTargetId = "div1"   }))
  {%>
    Date: 
   <%= Html.TextBox("date", String.Format("{0:g}", Model.date), new { id = "datePicker"})%>
   <% } %>

        <script type="text/javascript">

        $(function() {
            $("#datePicker").datepicker();
        });
        </script>

当我直接调用这个部分视图的 url 时，它只呈现这个视图，日期选择器可以完美地工作。 （为了进行测试，我将所需的 jquery 和 jqueryui 脚本以及 css 引用直接添加到局部视图）

但如果我使用Ajax.Actionlink 将这个部分视图加载到一个 div（称为 div2，提交上述表单应该更新 div1）中，如下所示：

<div id="div1">
    <%= Ajax.ActionLink("Edit", "/EditData", new { id = Model.id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div2" } )%>                  

</div>
<div2>placeholder for the form</div>

日期选择器将不再出现。 我最好的猜测是加载的 html 中包含的 javascript 没有被执行，

($(document).ready(function() {
        $("#datepicker").datepicker();
    }); doesnt work either

如果是这种情况，我应该如何以及在哪里调用 $("datepicker").datepicker(); ？ （把它放在ajax.actionlink 的ajaxoptions 中作为oncomplete = "$(function() { $('#datepicker').datepicker();});" 仍然不起作用。

如果不是这样，那我的问题在哪里？

Answer 1

veggerby 给出的答案可能会在给定的场景中起作用，因此我将其标记为正确答案。

我的问题是 javascript 位于 html 的一部分中，通过 ajax 动态加载。然后加载的 javascript 代码不会被 javascript 解释器拾取（或者任何我应该在客户端调用 javascript 处理的东西）。

在我的情况下，veggerby 的解决方案也不起作用，但那是因为在我的应用程序中，我什至通过 ajax 加载了那段 html+javascript。这会导致同样的问题。

我不想将 javascript 放在第一个正常加载的页面中，因为它并不总是加载相同的应用程序（因此可能在不需要时执行代码）。

我通过创建一个单独的 .js 脚本解决了这个问题，该脚本包含在 site.master 中：

function rebindJQuery(data) {
    jQuery('#div2').html(data.get_data());
    jQuery('#datepicker').datepicker();
    return false; //prevent original behavior, in this case folowing the link
}

被执行的

<%= Ajax.ActionLink("Edit", "/EditData", new { id = Model.id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div2" , oncomplete="rebinJQuery"  } )%>

我还没有找到将 UpdateTargetId 放入我的 rebindJQuery(data) 函数的方法，所以这可以更通用。尽管如此，这解决了我的问题。 （以及在 stackoverflow 上提出的几个类似问题）

Answer 2

我不知道为什么这不起作用，但您可以跳过使用 Ajax.ActionLink 而是在其自身上使用 JQuery 来执行此任务，即：

<div id="div1">
    <%= Html.ActionLink("Edit", "/EditData", new { id = Model.id } )%>                  
</div>
<div2>placeholder for the form</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#div1 a").click(function() {
            $.get(
                $(this).attr("href"),
                null,
                function (data) { 
                    $("#div2").html(data); 
                    $("#datepicker").datepicker();
                });
            return false; // to prevent link
        });
    });
</script>

Answer 3

jQuery 实时事件可能很有用。

http://docs.jquery.com/Events/live