CODEWITHSUNDEEP
jqueryajax
Sean
Sean

Reputation: 2891

Jquery sortable/serialize with sortable and connect with

Hey all I'm extremely new to jquery and ajax and I'm looking for some advice on how to do this correctly.

I had a div that I was using sortable on so I could arrange things as needed. It looked something like:

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

And then in my ajax data I had something like:

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

Which worked fine but it made sense to disaggregate the data and I broke the div into two separate div's and used the connectWith to allow the dragging on content between the two:

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

What I'm trying to figure out now is how to send the data of both div's in my ajax put. I tried the obvious:

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

But no luck. I'd definitely appreciate any assistance.

Cheers, Sean

Upvotes: 4

Views: 1311

Answers (2)

Steve Tauber
Steve Tauber

Reputation: 10169

There is a much easier way to do this. I've using the portlets from the jQuery UI example, but I only have one column instead of three: http://jqueryui.com/sortable/#portlets

I want to serialize all the portlets. So here's my code:

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

The attribute key in the second param changes the behavior to search for a special data-sort attribute which should be formatted like this:

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

In HTML, my rows look like this:

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

Ending up with data like this after I swapped the first two elements:

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

Upvotes: 0

Maresh
Maresh

Reputation: 4712

Firstly you should use classes instead of IDs, it'd be more flexible.

And I think the problem comes from the fact that you have 2 object, the data content is overwritten after each call.

You should use a function, something like this:

    data : getContent(),

    function getContent() {
        var data = "";

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

        });
       return data;
    }

Upvotes: 6

Related Questions