jQuery Help

[JamesU2005]

Following up from my draggable/sortable thread, have found a few tutorials helping with the moving phase, but having trouble with the cookie side.

The problem is with loading the positions, think the saving code is ok but not the loading.

Any ideas?

<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 
		{
			alert('No items saved in "' + name + '".');
		}	
	}

	// 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>

 

[JamesU2005]

Right, had another play and I am getting a bit futher now.

It now remembers where you move the blocks, but after a refresh locks them in place and they can not move.

Any ideas?

<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>

 

[JamesU2005]

No one?

Feels like I'm not miles away but my lack of experience has limited me this far.