jquery save element positions (serialize?)

Question

Hello.

How do I save elements positions in a div?

Do i use serialize and if yes how do I do it?

I have this div:

<div id="produtlist">
    <img id="productid_10" src="images/pic10.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_11" src="images/image1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_12" src="images/image2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_13" src="images/pic1.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_14" src="images/pic2.jpg" class="sortableproduct" alt="" title="" />
    <img id="productid_15" src="images/pic3.jpg" class="sortableproduct" alt="" title="" />
</div>

Answer 1

Well if you just need to remember the order, you could just bung a comma-delimited string of the id's into a cookie? And pull them back out on page load.

Serialize only works on form data, as far as I know, and not on DOM elements.

To address your comment, you'd build a CSV from the page using simple jquery:

var list = '';
$('#productlist .sortableproduct').each(function() {
    list += this.attr('id') + ',';
});

Then you save list to a cookie, or send it back to the server.

Putting things back in their order is a little tougher. If you send the string back to the server, it would be far simpler to just output things in the right order... But you can use the DOM tools in jquery to move DOM objects around. Simple enough either way.

Answer 2

I use a similar function in one of my projects and I've got a piece of code ready to restore the ordering. The function takes 2 parameters:

1. The list container
2. The cookie that holds the comma separated IDs.

I use it to reorder ul based lists, but should work fine in your case too...

// Function that restores the list order from a cookie
function restoreOrder( _list, _cookie ) {

 var list = $( '#' + _list );
 if( list == null ) return;

 // fetch the cookie value (saved order)
 var cookie = $.cookie( _cookie );

 if( !cookie ) return;

 // make array from saved order
 var IDs = cookie.split( "," );

 // fetch current order
 var items = list.sortable( "toArray" );

 // make array from current order
 var rebuild = new Array();
 for( var v = 0, len = items.length; v < len; v++ )
  rebuild[items[v]] = items[v];

 for( var i = 0, n = IDs.length; i < n; i++ ) {

  // item id from saved order
  var itemID = IDs[i];

  if( itemID in rebuild ) {

   // select item id from current order
   var item = rebuild[itemID];

   // select the item according to current order
   var child = $( '#' + _list ).children( '#' + item );

   // select the item according to the saved order
   var savedOrd = $( '#' + _list ).children( '#' + itemID );

   // remove all the items
   child.remove();

   // add the items in turn according to saved order
   // we need to filter here since the "ui-sortable"
   // class is applied to all ul elements and we
   // only want the very first!  You can modify this
   // to support multiple lists - not tested!
   $( '#' + _list ).filter( ':first' ).append( savedOrd );

  } // if

 } // for

} // restoreOrder

I've forgotten where I had got it from (some forum or blog that came up while Googling)... but due credits to the original author. I have modified the original routine a bit to make it more reusable by accepting those parameters.

Cheers, miCRoSCoPiC^eaRthLinG