Jquery save positions of elements (serialize?)
How do I keep the positions of elements in a div?
I am using serialization, and if so, 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>
a source to share
I am using a similar function in one of my projects and I have a piece of code ready to restore order. The function takes 2 parameters:
- List of containers
- A cookie containing comma separated identifiers.
I use it to reorder ul-based lists, but should work fine in your case ...
// 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 forgot where I got it from (some kind of forum or blog that came up while Googling) ... but at the expense of credits to the original author. I modified the original procedure a bit to make it more reusable by accepting these options.
Cheers, Microscopic ^ earthling
a source to share
Well, if you just need to remember the order, can you just insert the comma id string into the cookie? And pull them back to page load.
Serialization only works on form data as far as I know, not on DOM elements.
To respond to your comment, you must create a CSV from the page using simple jquery:
var list = '';
$('#productlist .sortableproduct').each(function() {
list += this.attr('id') + ',';
});
Then you save the list to a cookie or send it back to the server.
Putting things back in order is a little tricky. If you post the string back to the server, it would be much easier to just output the data in the correct order ... But you can use the DOM tools in jquery to traverse DOM objects. Simple enough anyway.
a source to share