Introduction:
Hello Everyone,
I have been looking for days for a way to extend the attached JavaScript code so that it will work as I need it to and have asked on various coding website but nobody seems to know the answer so in a last chance effort I have come here in the hopes that someone will be able to assist me.
About the script:
When ran, the script below will allow you sort (by dragging and dropping) a group of items from a list and the order of those items will then be saved to a cookie allowing you to refresh the page leaving the sort order intact.
The Problem
The problem with the attached script is that it only works for 1 list and adding an additional list to the page will not work. (the items in the other list cannot be sorted or saved in anyway).
The Request:
I would like to be able to extend the script so that it will sort more than 1 list and save the order for all of the list to a cookie (be it one cookie for all or separate cookies for each list this part does not matter) and to make things as simple as possible I should note that to I do not need to mix items between the list I just need to sort the items in each list independently and then save / restore the order of each list in a cookie.
Closing Statement:
Finally I just want to say that I am fairly new to the world of JavaScript programming so the more assistance you can provide the better but it goes without saying that any and all replies will be greatly appreciated.
Thanks, Dave
The JavaScript:
// set the list selector
var setSelector = "#list1";
// 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;>
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.ui-sortable").children("#" + item);
// select the item according to the saved order
var savedOrd = $("ul.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.ui-sortable").filter(":first").append(savedOrd);
}
}
}
// code executed when the document loads
$(function() {
// here, we allow the user to sort the items
$(setSelector).sortable({
axis: "y",
cursor: "move",
update: function() { getOrder(); }
});
// here, we reload the saved order
restoreOrder();
});
An Example Html Page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<ul id="list1">
<li id="item-1">List Item 1</li>
<li id="item-2">List Item 2</li>
<li id="item-3">List Item 3</li>
<li id="item-4">List Item 4</li>
<li id="item-5">List Item 5</li>
<li id="item-6">List Item 6</li>
</ul>
</body>
</html>