Tutorial :jQuery UI, sortables and Cookie plugin with multiple lists



Question:

I'm using jQuery UI sortable plugin with the cookie plugin to set and get the list of two sortable lists.

I found this piece of code to set and get a cookie: http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/#comment-6441

It works as I want to for one list, but not two (I've made the changes listed in the comments but fail somewhere).

My guess is that I have to specify the first and the second list for the setSelector and not use a class for the list. I tried "var setSelector = "#first, #second"; but that that doesn't do it.

Ideas?

Thanks

$(function() {

// set the list selector  var setSelector = ".sortable";  // set the cookie name  var setCookieName = "listOrder";  // set the cookie expiry time (days):  var setCookieExpiry = 7;    // function that writes the list order to a cookie  function getOrder() {      // save custom order to cookie      $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });  }    // function that restores the list order from a cookie  function restoreOrder() {      var list = $(setSelector);      if (list == null) return        // fetch the cookie value (saved order)      var cookie = $.cookie(setCookieName);      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 = $("ul" + setSelector + ".ui-sortable").children("#" + item);                // select the item according to the saved order              var savedOrd = $("ul" + setSelector + ".ui-sortable").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!              $("ul" + setSelector + ".ui-sortable").filter(":first").append(savedOrd);            }      }  }    // code executed when the document loads  $(function() {      // here, we allow the user to sort the items      $(setSelector).sortable({          cursor: 'move',          items: 'li',          //axis: "y",          opacity: 0.6,          //revert: true,          scroll: true,          scrollSensitivity: 40,          placeholder: 'highlight',          update: function() { getOrder(); }      });        // here, we reload the saved order      restoreOrder();  });  

});


Solution:1

_http://code.google.com/p/cookies/

_http://noteskeeper.ru/article/save-state-jquery-ui-sortable/

   root = $("#sidebar");       $('> *', root).each(function (index) {        this.id = 'block-' + index;       });       root.sortable({        cursor: 'move',        revert: true,        placeholder: 'ui-state-highlight'       });         // function that writes the list order to a cookie       root.bind( "sortupdate", function (event, ui) {        // save custom order to cookie              var order = $(this).sortable('serialize');              $.cookies.set('sortable', order);          });         // here, we reload the saved order       // fetch the cookie value (saved order)       var c = $.cookies.get('sortable');       if (c) {        // function that restores the list order from a cookie        $.each(c.split('&'), function () {         var id = this.replace('[]=', '-');         $('#' + id).appendTo(root);        });       }  


Solution:2

You should replace the code

var setSelector = ".sortable";

to

var setSelector = "#sortable";


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »