由 2 个 Ajax 调用更新的相同 div

Question

我有一个包含表格的 div。 此表支持通过 PagedList 以 ajax 方式进行分页。

代码：

 @Html.PagedListPager(Model, page => Url.Action("NavigateToPage", "Home", new RouteValueDictionary()
            {
                {"pageNumber", page},
            }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions {HttpMethod = "GET", UpdateTargetId = "toUpdate"}))

另外，我希望表格每 30 秒刷新一次。所以我写了这样的jQuery每30秒更新一次，

var ajaxUpdateFunction = function () {

    $.ajax({
        type: "GET", 
        url: "/Home/NavigateToPage",
        data: {
            pageNumber:$(".active").text()                
        },
        success: function (data) {
            $('#toUpdate').replaceWith(data);
        },
        error: function () {
            console.log("error");
        },
    });
 };
  $(function() {
     setInterval(function () {
        ajaxUpdateFunction();
    }, 10000);  
});

但是，当 jQuery ajax 更新开始工作时，pagedList 导航不起作用。如果我注释 jQuery ajax 函数，pagedList 导航正在工作。

这里出了什么问题？我不应该通过 2 个不同的 ajax 调用来更新同一个 div 吗？

我可以在 Razor 中进行表格刷新吗？

Answer 1

我认为你需要的是html() 而不是replaceWith()

success: function (data) {
   $('#toUpdate').html(data);
},

replaceWith() 函数会从DOM 中删除元素，因此在您的代码运行后，插件将无法访问它，因为它不再存在...