Question

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

Answer 1

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