Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

    issue saving then reforming .sortable order via cookies

    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
    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:
    Code:
    <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>
    Last edited by DanInMa; 05-04-2011 at 12:42 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    split(";")
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    DanInMa (05-04-2011)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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)
    Last edited by DanInMa; 05-04-2011 at 12:15 AM.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

    Code:
    $(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);
          });
    }
    
    });

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    nevermind! Got it now! thanks for getting me in the right direction andrew


    Code:
      $(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);
          });
    }
    
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •