排序后如何发布和保存更改?

时间:2014-02-03 10:42:35

标签: javascript jquery coldfusion

我尝试排序页面的标题列表,我可以在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>

这是我的清单。

<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>

任何人都可以帮我解决我必须做的事情,将更改发布到所请求的方法吗?感谢。

2 个答案:

答案 0 :(得分:2)

您没有为按钮绑定点击事件。

$("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'事件执行相同的处理程序。 E.g:

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

答案 1 :(得分:0)

试试这个,

    $.post( "content.cfc", { data: $(this).sortable('toArray') } ).done(function( data ) {
    alert( "Data Loaded: " + data );
  });

在jquery中替换POST

$.ajax({
  type: 'POST',
  url: "content.cfc",
dataType: 'json',
  beforeSend: function(){
sortOrder()
},
  data: {'data':$(this).sortable('toArray')},
  success: function(result){
alert(result)
},

});