Loading Sorted Items

Jul 7, 2010 at 1:43 PM
Edited Jul 7, 2010 at 1:44 PM
Hi Masters! I´m writing a code that save my sorted list in a cookie and I try to recovery it using .Net(C#). I was thinking about to recovery it on client, cause all of the process it´s on client (cookie). I´m using the List DragSort to create many panels like Igoogle, so I have 8 panels in my page and when the page load´s, I´m veryfing the position of this panels in the cookie andÌ´m trying to load this panels on the same order that cookie. I would like to know if there´s some solution to load this panels with a client code using Jquery, please! Thanks Masters! Andrew Silvestri
Coordinator
Jul 17, 2010 at 2:44 AM
Edited Nov 3, 2010 at 11:23 AM

Does something like this help?

var order = "9|7|5|3|1|2|4|6|8".split("|");
for (var i=0; i<order.length; i++)
{
    var item = $("#list1 > li[itemID=" + order[i] + "]");
    if (i != $("#list1 > li").index(item))
    {
        $("#list1 > li:eq(" + i + ")").before(item);
        if (i == 0)
            $("#list1").prepend(item);
        else
            $("#list1 > li:eq(" + (i - 1) + ")").after(item);
    }
}

 

Oct 8, 2010 at 12:16 AM

I have a similar question as above.  I can get the serialized order and save it as a  cookie fine, but am having trouble figuring out how to load the sorted order from the cookie.  Is it possible to do with with an html list?  I am just learning about .net so I am not real comfortable with it yet, but am looking into migrating my current site into .net.  If I could retain the list as a basic ul>li list while I learn about .net that would be great.  My basic mark-up for the drop-down menu is like so:

<div id="menuHorizontal">
  <ul class="menu">
    <li><a href="#" class="parent"><span>Home</span></a>
      <ul class="dragSort">
        <li><div class="dragHandle"><img ...../></div><a href="somePage.html" title="someTitle">Item 1</a></li>
  ..... </ul> </li> </ul> </div>
where I have some third level lists as well.

Here is the code I have so far to create the serialized list and save it as a cookie:


<script type="text/javascript">
$("ul.dragSort").dragsort({dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate:"<li class='placeHolder'></li>"});
function saveOrder() {
    var serialStr = "";
    $("#menuHorizontal li a").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).attr('title'); });
	alert(serialStr);
	$.cookie('menuSort', serialStr, {expires: 10000});
};
  </script>

I know I need to read my cookie which I am thinking of using a function retrieveOrder like so:

function retrieveOrder() {
$.cookie('menuSort');
}

I also know I need to use the jQuery split method, but this is where I am kind of stuck.  If anyone can help me on this it would really help.  Is there a better way I should do this?

Thanks in advance.

Austin

Coordinator
Nov 3, 2010 at 11:00 AM
Edited Nov 3, 2010 at 11:25 AM

Reading from the cookie returns a string so you don't need to look for a jquery split method. Here is some sample code for your situation:

function saveOrder() {
    var main = new Array();
    //note this selector finds the li elements that are immediate children of an element with the class menu, so will not return li elements of the inner list
    $(".menu > li").each(function(i, elm) {
        var sub = new Array();
        $(elm).find("li a").each(function(j, elm2) { sub[j] = $(elm2).attr("title"); });
        main[i] = sub.join(":");
    });
    
    alert(main.join("|"));
    $.cookie('menuSort', main.join("|"), {expires: 10000});
};
function retrieveOrder() {
    var main = $.cookie('menuSort').split("|");
    for (var i=0; i<main.length; i++)
    {
        var sub = main[i].split(":");
        //if the string is empty split will return an array of size 1, so set to empty array
        if (sub.length == 1 && sub[0] == "")
            sub = new Array();
        for (var j=0; j<sub.length; j++) {
            var item = $("a[title=" + sub[j] + "]").closest("li");
            if (j != $(".menu > li:eq(" + i + ") li").index(item)) {
                //can't place element before another element in case this is the last element (bug in previous example)
                //if first element then there is no previous element that this one can be placed after, so prepend item to the beginning of container
                if (j == 0)
                    $(".menu > li:eq(" + i + ") ul").prepend(item);
                else
                    $(".menu > li:eq(" + i + ") li:eq(" + (j - 1) + ")").after(item);
            }
        }
    }
}

This is a little more complicated since I assume you are wanting to record which parent item the sub menu item has been dragged to and restore it.

Nov 3, 2010 at 11:27 AM
Hi msm_ham!

Thank´s a lot for your help!

Andrew


From: [email removed]
To: [email removed]
Date: Wed, 3 Nov 2010 03:00:21 -0700
Subject: Re: Loading Sorted Items [dragsort:218585]

From: mcm_ham
Split used in the example is actually a method of a string and not a jquery object, which is fine because reading from the cookie is a string. Here is some sample code for your situation:

function saveOrder() {
    var main = new Array();
    $(".menu > li").each(function(i, elm) {
        var sub = new Array();
        $(elm).find("li a").each(function(j, elm2) { sub[j] = $(elm2).attr("title"); });
        main[i] = sub.join(":");
    });
    
    alert(main.join("|"));
    $.cookie('menuSort', main.join("|"), {expires: 10000});
};
function retrieveOrder() {
    var main = $.cookie('menuSort').split("|");
    for (var i=0; i<main.length; i++)
    {
        var sub = main[i].split(":");
        if (sub.length == 1 && sub[0] == "")
            sub = new Array();
        for (var j=0; jvar item = $("a[title=" + sub[j] + "]").closest("li");
            if (j != $(".menu > li:eq(" + i + ") li").index(item)) {
                if (j == 0)
                    $(".menu > li:eq(" + i + ") li:eq(" + j + ")").before(item);
                else
                    $(".menu > li:eq(" + i + ") li:eq(" + (j - 1) + ")").after(item);
            }
        }
    }
}
This is a little more complicated since I assume you are wanting to record which parent item the sub menu item has been dragged to and restore it.
Read the full discussion online.
To add a post to this discussion, reply to this email (dragsort@discussions.codeplex.com)
To start a new discussion for this project, email dragsort@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com
Nov 22, 2010 at 11:30 PM
Edited Nov 23, 2010 at 2:04 AM

Thank you very much for your response mcm_ham.

Sorry for the late response.  I ended up having to totally restructure the menus do to the length of the menus and using UI-Layout.  Anyways, I now have a "My Favorites" menu where I have a star next to each link in the dropdown menu except for the favs menu.  The other menus are not drag and drop, but the my favs is.  So I clone the links after the star is "clicked", wrap it with an li and put the drag handle in front of the anchor and a "remove" button after the anchor and append it to the my favs menu.  From there the user can drag and drop sort the links.  Once they are done building their favs menu, they select a button to save the menu, where I serialize the links and write it to a cookie.  I then retrieve the cookie, clone the link since I want it in both the original menu and the favs menu, add the drag handle and the remove button, and append it back to the favs menu.  I used your excellent guidance from above and implemented it this way:

 

//change the save favs button to inform save required after drag and drop sorting
function pleaseSave() {
	$('div#menuHorizontal a#saveFavs').css({'background-position': '0 -25px', 'cursor': 'pointer'});
};
//functions to save order of favorites links
function saveOrder() {
    var serialStr = "";
    $("ul.dragSort li a").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).attr('title'); });
	//alert(serialStr);
	$.cookie('menuSort', serialStr, {expires: 10000});
};
function retrieveOrder() {
    var main = $.cookie('menuSort').split("|");
    for (var i=0; i<main.length; i++)
    {
            var item = $("a[title=" + main[i] + "]");
			item.prev('div.star').addClass('favorite')
			item.clone(true).appendTo("ul.dragSort").wrap("<li></li>").before("<div class='dragHandle'><img class='png' src='_images/dragHandle4.png' width='11' height='11' /></div>").after("<div class='remove' title='Remove from Favorites'></div>");
	}
}
$(document).ready(function(){retrieveOrder();});

I haven't done extensive testing yet but it seems to be working quite well.  Do you see anything that might cause me some problems?  Again, thank you very much for your response...this is a great tool to have.

EDIT: I did run into an issue if the cookie did not yet exist, so I just did a quick check if the cookie existed or not:

function retrieveOrder() {
	if($.cookie('menuSort') != null){
	var main = $.cookie('menuSort').split("|");
    for (var i=0; i<main.length; i++)
    {
            var item = $("a[title=" + main[i] + "]");
			item.prev('div.star').addClass('favorite')
			item.clone(true).appendTo("ul.dragSort").wrap("<li></li>").before("<div class='dragHandle'><img class='png' src='_images/dragHandle4.png' width='11' height='11' /></div>").after("<div class='remove' title='Remove from Favorites'></div>");
	}
}return;
}