CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortableserialization
oshirowanen
oshirowanen

Reputation: 61

jQuery UI Sortable - serialize multiple columns

I have a little script which allows me to use jQuery to sort div tags nicely between 3 columns. The jQuery can be seen below:

$(".column").sortable(
 { connectWith: '.column' },
 { update: function(event, ui) { alert($(this).sortable('serialize')) }
});

If I move an item from column 1 to column 2, it will display 2 alerts, showing the serialized data for the 2 affected columns. The problem is, I need to know the column ids too, so I can eventually save the data into a database. Right now, if it is possible to just display the column id in an alert but, that will be enough for me to continue.

Upvotes: 2

Views: 5859

Answers (4)

theflowersoftime
theflowersoftime

Reputation: 2615

I was looking for a good answer to this and none of the ones on here really were exactly what I wanted, so I'll share the way I did it:

$('ul.playerList').each(function() {
    var id = $(this).attr('id'); // get element id
    window[id] = $(this).sortable("serialize",{key:id}); // make global var w/ data
});

// you could make this more dynamic if you have a lot of lists
var data = ul_id_1 + "&" + ul_id_2 + "&" + ul_id_3 + "&action=other_vars"; 

$.post(url,data,function(resp) {
    $("#test").html(resp);
});

Upvotes: 0

Soliman
Soliman

Reputation: 441

Just solved this with a very very dirty trick. Like to share it with you, maybe it helps.

<div class="column" >
  <div class="portlet" id="portlet_1_name">
     <div class="portlet-header">Title1</div>
     <div class="portlet-content">Text</div>
  </div>
  <div class="portlet" id="portlet_2_name">
     <div class="portlet-header">Title2</div>
     <div class="portlet-content">Text</div>
  </div>
</div>
<!-- for debug -->
<div id="serial"></div>

etc...

var out = "";

$('.portlet').each(function(index) {
   out += $(this).attr('id') + ',';
});

$("#serial").html(out);
// or alert(out) if you like

Upvotes: 2

oshirowanen
oshirowanen

Reputation: 15925

Got it working using the "closest" method:

{ update: function(event, ui) { alert($(this).closest("div").attr("id")); alert($(this).sortable('serialize')) }

Upvotes: 1

Qwibble
Qwibble

Reputation: 399

$(".column").sortable(
  { connectWith: '.column' }, { update: function(event, ui) {
     alert($(this).sortable('serialize'));
     alert($(this).parents('.column').attr(id));
  }
});

I think that should work. Finding the parent column of the div you've moved, and then gettings it's id attribute.

Upvotes: 3

Related Questions