jQuery issue saving then reforming .sortable order via cookies

[DanInMa]

ok, so I am using jquery 1.5.2, jquery ui 1.8.12 and the jquery cookie plugin.

I am trying to save the order of a UL list into an array, which is then stored into a cookie. This works as expected. I am then also trying to repopulate the UL according to data found in the cookie on dom.ready. The part that is not working is the repopulation portion ( I will highlight in red)

tell me where I messed up please . ( it seems like it doesnt like my appendTo for some reason)

jquery code

  $(document).ready(function() {
 

 	$( "#nsmclist" ).sortable({
   update: function(event, ui) {
     var nsmclistordervar = $('#nsmclist').sortable('toArray');
	  $.cookie("nsmclistorder",nsmclistordervar);
	  //alert($.cookie('nsmclistorder'))
	}
});
 
 var foo = $("#nsmclist");
  var order1 = $.cookie("nsmclistorder");
if (order1) {
      $.each(order1.split(),function(i,id) {
            //appending the element with the ID given id should move each element to the end of the 
            // list one after another, and at the end, the order should be restored.
           $("#"+id).appendTo(foo);
      });
}

});

markup:

<ul id="nsmclist">
<li id="nsmclist1">test1</a></li>
<li id="nsmclist2">test2</a></li>
<li id="nsmclist3">test3</a></li>
<li id="nsmclist4">test4</a></li>
</ul>

[AndrewGSW]

split(";")

[DanInMa]

oddly that sort of worked. ( I have no idea why though) but on page reload it only appears to be appending items that I moved but it's only appending elements that were moved, hence they show on the bottom of the list. I did some checking using alerts and it's updating the cookie as expected.

for example I moved the 1st element to the second position and reloaded the page and the order changed to 1 3 4 2 instead of 2 1 3 4
( i event deleted the cookie and tried again, same result)

[DanInMa]

i added a dive with an id of test and tried this so I could see what data was in the cookie on pageload and when I move an element. very weird. if the order is 1234 and I move 4 to the 2 position, then reload the page, its just appending 2 tot he bottom of the list.

$(document).ready(function() {
 

 	$( "#nsmclist" ).sortable({
   update: function(event, ui) {
     var nsmclistordervar = $('#nsmclist').sortable('toArray');
	  $.cookie("nsmclistorder",nsmclistordervar);
	  //alert($.cookie('nsmclistorder'))
	  $("#test").html($.cookie("nsmclistorder"))
	}
});
 
 var foo = $("#nsmclist");
  var order1 = $.cookie("nsmclistorder");
if (order1) {
$("#test").html(order1)
      $.each(order1.split(";"),function(i,id) {
            //appending the element with the ID given id should move each element to the end of the 
            // list one after another, and at the end, the order should be restored.
           $("#"+id).appendTo(foo);
      });
}

});

[DanInMa]

nevermind! Got it now! thanks for getting me in the right direction andrew

  $(document).ready(function() {
 

 	$( "#nsmclist" ).sortable({
   update: function(event, ui) {
     var nsmclistordervar = $('#nsmclist').sortable('toArray');
	  $.cookie("nsmclistorder",nsmclistordervar);
	  $("#test").html($.cookie("nsmclistorder"))
	}
});
 
 var foo = $("#nsmclist");
  var order1 = $.cookie("nsmclistorder");
if (order1) {
$("#test").html(order1)
      $.each(order1.split(","),function(i,id) {
            //appending the element with the ID given id should move each element to the end of the 
            // list one after another, and at the end, the order should be restored.
           $("#"+id).appendTo(foo);
      });
}

});