Question

我的连接排序很好但我正在努力做一个改进：

如果用户将项目拖入“#buttonmaker”排序，我希望刷新整个页面。

如果用户将项目拖放到可排序的按钮制作器中，我的ajax sorting.php页面会根据用户放入的项目使用新的菜单按钮更新数据库。之后，页面需要刷新，因此需要刷新页面。用户可以看到他们刚刚创建的新菜单按钮。

95％的时间用户不会使用#buttonmaker而且我不需要页面刷新... ajax就是这样。这只是我需要页面刷新的#buttonmaker容器。谢谢你的帮助。

$(function() {
    $("#draft, #trash, #a_bunch_more_divs, #buttonmaker").sortable({
        connectWith: '.connectedSortable',
        placeholder: 'ui-state-highlight',
        opacity: 0.6,
        scroll: true,
        update : function () 
        { 
            $.ajax(
            {
                type: "POST",
                url: "sorting.php",
                data: 
                {
                    draft_sort:$("#draft").sortable('serialize'),
                    trash_sort:$("#trash").sortable('serialize'),
                    other_sort:$("#a_bunch_more_divs").sortable('serialize'),
                    buttonmaker_sort:$("#buttonmaker").sortable('serialize')
                }
            });
        }
    }).disableSelection();
});

更新的代码（自从原帖后我改变了一些美容内容）：

$(function() {
    var refreshNeeded = false;
    $("#draft, #published, #trash").sortable({
        connectWith: '.connectedSortable',
        placeholder: 'ui-state-highlight',
        opacity: 0.6,
        scroll: true,
        update : function (event, ui) 
        { 
            var $sortable = $(this);
            if(ui.item.parent()[0] != this) return;
            var postData = {};
            postData[$sortable.attr('id') + '_sort'] = $sortable.sortable('serialize');
            if(ui.sender){
                postData[$sortable.attr('id') + '_sort'] = ui.sender.sortable('serialize');
            }
            $.ajax(
            {
                type: "POST",
                url: "js/post_sorting.php",
                data: postData,
                success: function() {
                    if(($sortable.attr('id') == "published")) refreshNeeded = true;
                    /*window.location.reload(true);*/
                }
            });
        }
    }).disableSelection();
    $(document).ajaxStop(function(){
        if(refreshNeeded){
            window.location.reload();
        }
    });
});

Answer 1

检查ajax调用的结果总是一个好主意。此外，在每次更新时发送整个内容都是浪费资源，因为源和目标可排序都会调用更新事件。

对于刷新，只需要在需要刷新时设置一个布尔变量，然后将事件绑定到.ajaxStop()以在所有ajax请求完成时运行。

$(function(){
    var refreshNeeded = false;

    $("#draft, #trash, #a_bunch_more_divs, #buttonmaker").sortable({
        connectWith: '.connectedSortable',
        placeholder: 'ui-state-highlight',
        opacity: 0.6,
        scroll: true,
        update : function(event, ui){
            var $sortable = $(this);

            // To avoid double-firing the event, return if it's not the sortable
            // where the item was dropped into.
            if(ui.item.parent()[0] != this) return;

            // Create object from the current sortable to post
            var postData = {};
            postData[$sortable.attr('id') + '_sort'] = $sortable.sortable('serialize');

            // If the item came from a connected sortable, include that in the post too
            if(ui.sender){
                postData[ui.sender.attr('id') + '_sort'] = ui.sender.sortable('serialize');
            }

            $.ajax(
            {
                type: "POST",
                url: "sorting.php",
                data: postData,
                success: function(){
                    // What if we're all happy?

                    // If the triggering sortable was the buttonmaker, set the refresh flag
                    if($sortable.attr('id') == "buttonmaker")) RefreshNeeded = true;
                },
                error: function(){
                    // What if there is an error?
                }
            });
        }
    }).disableSelection();

    $(document).ajaxStop(function(){
        // All requests have completed, check if we need to refresh
        if(refreshNeeded){
            // Refresh the page (just a simple reload for now)
            window.location.reload();
        }
    });
});

编辑：添加了一些代码，仅在发布数据中发送当前可排序的代码。它假设数据的名称始终为id_sort，其中id是您可排序的ID。

编辑2：添加了更多位以避免双重触发事件，因此每次移动只会提交一次。如果项目来自已连接的可排序项，则它将在请求中包含两个可排序项。

如果将项目放入某个容器，则使用Jquery Connected刷新页面可排序

1 个答案: