javascript - 排序后如何发布和保存更改？

Question

我试图对页面的标题列表进行排序，当我点击排序按钮时，在 firebug 控制台中排序后我可以看到正确的顺序，但它没有将我的请求带到所请求的方法。这是我的 jquery 代码，我对它有点陌生。

<script>
    $(function(){
         $("#sortable").sortable();
         $sortable = $("#sortable");
         $( "#sortable_nav_items" ).sortable({
             placeholder:"sortable-placeholder",
            update: function( event, ui ) {
                console.log($("#sortable_nav_items").sortable("toArray",{attribute:"pageid"}));
            }
        });
        var order = $("#sortable_nav_items").sortable("toArray",{attribute:"pageid"});
            console.log(order);
        $sortable.bind('sortupdate',function(event,ui){
            console.log($(this).sortable('toArray'));
            $.post(
                "content.cfc",
                {method:"sortOrder",data:$(this).sortable('toArray')}
            );
        });
    });
</script>

这是我的 list 。

<cfoutput>
    <div class="well"> 
        <ul id="sortable_nav_items" class="list-group">
            <cfloop query="_q">
                <li class="list-group-item" pageid="#_q.id#" navOrder="#_q.nav_order#">
                    #_q.title#
                </li>
            </cfloop>
        </ul>
    </div>
    <div class="form-group">
        <div class="col-md-offset-3 col-md-9">
            <button class="btn btn-info" type="submit">
                <i class="glyphicon glyphicon-retweet"></i>
                Sort
            </button>
        </div>
    </div>
</cfoutput>

任何人都可以帮我解决我必须在其中做什么才能发布对请求方法的更改吗？谢谢。

Answer 1

您还没有为您的按钮绑定(bind)点击事件。

$("button").click(function() {
   var order = $("#sortable_nav_items").sortable("toArray",{attribute:"pageid"});
   $.post(
     "content.cfc",
     {method:"sortOrder",data:order}
   );
});

这是 jsfiddle(虽然没有冷融合的东西):http://jsfiddle.net/nn4x8/4/

如果您想在每次排序更改时发送服务器请求，请为“sortupdate”事件使用相同的处理程序。例如:

$("#sortable_nav_items").bind('sortupdate', function() {
    var order = $(this).sortable("toArray",{attribute:"pageid"});
    $.post(
        "content.cfc",
        {method:"sortOrder",data:order}
    );
});