Question

嘿所有我对jquery和ajax都非常陌生，而且我正在寻找有关如何正确执行此操作的建议。

我有一个div，我正在使用它可以排序，所以我可以根据需要安排事情。它看起来像是：

$('#resource-detail-content).sortable({

然后在我的ajax数据中，我有类似的东西：

data: $('#resource-detail-content').sortable('serialize'),

哪种方法运行正常但分解数据是有意义的，我将div分成两个独立的div并使用connectWith允许拖动两者之间的内容：

$('#resource-detail-content,#resource-detail-content2').sortable({
  connectWith: '#resource-detail-content,#resource-detail-content2',

我现在要弄清楚的是如何在我的ajax put中发送两个div的数据。我尝试了显而易见的事实：

data: $('#resource-detail-content, #resource-detail-content2').sortable('serialize'),

但没有运气。我非常感谢你的帮助。

干杯，肖恩

Answer 1

首先，你应该使用类而不是ID，它会更灵活。

我认为问题来自于你有2个对象，每次调用后都会覆盖数据内容。

你应该使用一个函数，如下所示：

    data : getContent(),

    function getContent() {
        var data = "";

        $(".resource-detail-content").each(function(){
        if (data == "")    
           data += $(this).serialize();
        else 
           data += "&" + $(this).serialize();

        });
       return data;
    }

Answer 2

有一种更简单的方法可以做到这一点。我使用了jQuery UI示例中的portlet，但我只有一列而不是三列：http://jqueryui.com/sortable/#portlets

我想序列化所有portlet。所以这是我的代码：

update: function (event, ui) {
    var data = $(this).sortable('serialize', {
        "attribute": "data-sort"
    });
}

第二个参数中的attribute键更改行为以搜索特殊的data-sort属性，该属性应格式如下：

<div class="portlet" data-sort="id=<?php echo $faq['Faq']['id']; ?>">
    <div class="portlet-header"><?php echo h($faq['Faq']['title']); ?></div>
    <div class="portlet-content"><?php echo h($faq['Faq']['body']); ?></div>
</div>

在HTML中，我的行看起来像这样：

<div class="column ui-sortable">
    <div class="portlet" data-sort="id=1">
        <div class="portlet-header">Question 1</div>
        <div class="portlet-content">Answer 1</div>
    </div>
    <div class="portlet" data-sort="id=2">
        <div class="portlet-header">Question 2</div>
        <div class="portlet-content">Answer 2</div>
    </div>
    <div class="portlet" data-sort="id=3">
        <div class="portlet-header">Question 3</div>
        <div class="portlet-content">Answer 3</div>
    </div>
</div>

在交换前两个元素之后结束这样的数据：

"id[]=2&id[]=1&id[]=3"

Jquery可排序/序列化，可排序和连接

2 个答案: