jQuery UI Sortable - serialize multiple columns

Question

Dear stackoverflow experts,

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.

Any help will be greatly appreciated.

Thanks

Answer 1

$(".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.

Answer 2

Thanks,

I will try this out first thing tomorrow.

Answer 3

That script above gives me an error saying that "id" is undefined.

So I tried this

{ update: function(event, ui) { alert($(this).parents().attr("id")); }

and now I am getting an empty string.

Answer 4

Got it working using the "closest" method:

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

Answer 5

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