Question

我正在尝试将jqueryUI的datepicker合并到这样的partialview中：

  <% 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调用到此局部视图时，所以它只渲染此视图，而datepicker完美地运行。（为了测试这个，我将所需的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的一部分动态加载thrue ajax。然后加载的javascript代码不会被javascript解释器（或任何我应该调用客户端上的javascript处理）接收。

在我的情况下，veggerby的sollution也不会工作，但那是因为在我的应用程序中我甚至加载了那段html + javascript thrue ajax。这会导致同样的问题。

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

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

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（数据）函数中，所以这可能更通用。尽管如此，这解决了我的问题。（以及关于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

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

3 个答案: