Sortable and Cookie Help, Desperate! :(
Hi,
Having real trouble getting the jQuery Sortable UI to save it's positions into a cookie.
Been following some great tutorials on the net but can't quite get it to work.
The problem is clearly with the Javascript code below.
Any help would make my year :) HTML code is at the bottom of this thread.
- <div id="example-1-4">
<
div id="containment">
<
div class="column left first">
<
ul class="sortable-list">
<
li class="sortable-item" id="A">Sortable item A</li>
<
li class="sortable-item" id="B">Sortable item B</li>
</
ul>
</
div>
<
div class="column left">
<
ul class="sortable-list">
<
li class="sortable-item" id="C">Sortable item C</li>
<
li class="sortable-item" id="D">Sortable item D</li>
</
ul>
</
div>
<
div class="column left">
<
ul class="sortable-list">
<
li class="sortable-item" id="E">Sortable item E</li>
</
ul>
</
div>
<
div class="clearer"> </div>
</
div>
</
div>
<!--
END: XHTML for example 1.4 -->
</
div>
</
div>
</
div>
- <script type = "text/javascript" src = "jquery-1.4.2.min.js" > </script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Get items
function getItems(exampleNr)
{
var columns = [];
$(exampleNr + ' ul.sortable-list').each(function(){
columns.push($(this).sortable('toArray').join(','));
});
return columns.join('|');
}
// Load items from cookie
function loadItemsFromCookie(name)
{
if ( $.cookie(name) != null )
{
renderItems($.cookie(name));
}
else
{
}
}
// Render items
function renderItems(items)
{
var html = '';
var columns = items.split('|');
for ( var c in columns )
{
html += '<div class="column left';
if ( c == 0 )
{
html += ' first';
}
html += '"><ul class="sortable-list">';
if ( columns[c] != '' )
{
var items = columns[c].split(',');
for ( var i in items )
{
html += '<li class="sortable-item" id="' + items[i] + '">Sortable item ' + items[i] + '</li>';
}
}
html += '</ul></div>';
}
$('#example-1-4').html(html);
}
// load positions form cookies
$('#example-1-4 .sortable-list').each( function( index ){
loadItemsFromCookie('cookie-b');
});
// Example 1.4: Sortable and connectable lists (within containment)
$('#example-1-4 .sortable-list').sortable({
connectWith: '#example-1-4 .sortable-list',
containment: '#containment'
});
// save positions into cookies
$('#example-1-4 .sortable-list').sortable({
connectWith: '#example-1-4 .sortable-list',
update: function(){
$.cookie('cookie-b', getItems('#example-1-4'));
}
});
});
</script>