Question

所以我有一个可排序的li列表，其中显示了一系列页面。

当我对它们进行排序时，我的jQuery代码会调用一个php页面来更新数据库中页面的顺序。

在与列表相同的页面上，它按照它们所在的顺序显示页面，但我希望能够在更新数据库后立即自动更新此订单，而无需实际刷新页面。

所以基本上，秘密地“刷新”pageContainer div。

这样做的最佳方式是什么？

<div id="pageContainer">
   <!-- include() a series of pages in the right order from database -->
</div>

 $("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(data) { $('#pageContainer').html(data);  }
        });
    }
});

修改所以一个简单的$('#pageContainer').html(data);就行了，但我的$('form').on('input propertychange change')停止了工作。如果有人想要查看，则修复程序在this page。

Answer 1

在php页面上创建已排序的内容，只需将结果添加到正确的div。

所以基本上......

$("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            url: url,
            data: postData,
            success: function(data) {  
            jQuery("#pageContainer").html(data);}
        });
    }
});

Answer 2

如果您在saveOrder.php页面中回显了所需的HTML，那么其余的很简单：

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html',
    success: function(data) { 
        $('#pageContainer').html(data);
    }
});

根据您的jQuery版本（v1.5 +），您可能希望利用$.ajax返回的jQuery Promise。您的代码将更改为：

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html'
}).done(function(data) {
    $('#pageContainer').html(data);
});

这允许您链接回调并使您的设置与回调函数分开。例如，您可以这样做：

...
}).done(function(data) {
    $('#pageContainer').html(data);
}).fail(function() {
    alert('failed :(');
}).always(function() {
    alert('done!');
});

Answer 3

你会让你的ajax调用返回html，如

dataType: 'html'

然后在你的成功函数中你会做

$('#pageContainer').html(data);

Answer 4

如何使用“委托”代替“开启”？

$('#pageContainer').delegate('form', 'input propertychange change', function(){...;})

jQuery刷新特定的div

4 个答案: