jQuery刷新特定的div

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')停止工作了。 如果有人要查看此頁面上的修復程序。

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

用“ delegate”代替“ on”怎么樣？

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