Sortable.serialize

Behaviours > Sortable > serialize

The Sortable object also provides a function to serialize the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call:


poststring = Sortable.serialize('id_of_container',[options]);
// poststring now contains key[]=value pairs separated by &

Important: For this to work, the elements contained in your Sortable must have id attributes in the following form:


id="string_identifier" 

//Example
<ol id="container_id">
  <li id="image_1">Item 1</li>
  <li id="image_2">Item 1</li>
  <li id="image_3">Item 1</li>
</ol>

Only the identifier part of the id attribute will be serialized. If you want to use an other form of id attributes, you need to implement your own serialization.

Options

Option Since Description
tag v1.0 The kind of tag (of the child elements of the container) that will be serialized.
name v1.0 The name of the key that will be used to create the key/value pairs for serializing in HTTP GET/POST format (that is, key[]=value&key[]=value …)

Example (from the Sortable Ghosted example)


<style>
  #content #testlist { 
      list-style-type:none;
      margin:0;
      padding:0;
   }
   #content #testlist li {
     width:200px;
     font:13px Verdana;
     margin:0;
     margin-left:20px;
     padding-left:20px;
     padding:4px;
     cursor:move;
   }
  div.dropmarker {
      height:6px;
      width:200px;
      background: url(/images/dropmarker.png) left top;
      margin-top:-3px;
      margin-left:-5px;
      z-index:1000;
      overflow: hidden;
   }
</style>

<ol id="testlist">
  <li id="image_1">Lorem ipsum dolor</li>
  <li id="image_2">sit amet</li>
  <li id="image_3">consectetur adipisicing</li>
  <li id="image_4">elit</li>
  <li id="image_5">sed do eiusmod</li>
  <li id="image_7">ut labore et dolore</li>
  <li id="image_6">tempor incididunt</li>
  <li id="image_8">magna aliqua</li>
</ol>

<script type="text/javascript" language="javascript">
  Sortable.create('testlist',{ghosting:true,constraint:false})
  alert(Sortable.serialize('testlist'));
</script>

Clarification: In this example, the output of the serialization will only give the numbers after the underscore in the list item IDs.

Tutorials

A short tutorial on using Sortables.serialize