Question

Please Skip to Update #2 at the Bottom if you don’t want to read the whole post.

I have created a customizable UI using jquery-ui connected lists:
http://jqueryui.com/sortable/#connect-lists

I now want to save the user’s configuration of the UI to a cookie on their local machine so that the next time they load the page the layout they previously setup will be loaded, as discussed on this page:
http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/

The problem is that after discussing how to save the custom configuration of multiple connected lists in part 2 of his writeup, he neglects to include multiple connected lists in part 3 where he implements the code into an actual design. I have been able to get everything on my page to work like the final example on that page, but whenever I try to modify the code to work with connected lists the page no longer works.

I understand the basic idea behind what the code is doing, but I don’t know JavaScript and have had no success in modifying the code to work with connected lists. I’m hoping that someone who does know JavaScript will be able to easily modify the code below to work with connected lists like part 2 does.

Part 2 saves the order of multiple connected lists, but doesn’t load external html pages with the corresponding name.

Part 3 loads external html pages with the corresponding names of the item, but only supports a single list.

Code for Connected Lists from Part 2:

// Load items
function loadItemsFromCookie(name)
{
    if ( $.cookie(name) != null )
    {
        renderItems($.cookie(name), '#wrapper');
    }
    else
    {
        alert('No items saved in "' + name + '".');
    }
}

// Render items
function renderItems(items, container)
{
    var html = '';
    var columns = items.split('|');

    for ( var c in columns )
    {
        html += '<div class="column"><ul class="sortable-list">';

        if ( columns[c] != '' )
        {
            var items = columns[c].split(',');

           for ( var i in items )
            {
               html += '<li id="' + items[i] + '">Item ' + items[i] + '</li>';
            }
        }

        html += '</ul></div>';
    }

    $('#' + container).html(html);
}

Code from part 3 that does not support connected lists (Trying to modify this to support connected lists):

// Get items
function getItems(id)
{
return $('#' + id + '-list').sortable('toArray').join(',');
}

// Render items
function renderItems(id, itemStr)
{
    var list = $('#' + id + '-list');
    var items = itemStr.split(',')

    for ( var i in items )
    {
        html = '<li class="sortable-item';

        if ( id == 'splash' )
        {
            html += ' col3 left';
        }
        html += '" id="' + items[i] + '"><div class="loader"></div></li>';
        list.append(html);

        // Load html file
        $('#' + items[i]).load('content/' + items[i] + '.html');
    }
}

Update #1:

I think I almost have it, I just can’t get it to insert html from the external html files. It was able to get it to insert variables and plain text, just not the external html.

// Render items
    function renderItems(items)
    {
        var html = '';

        var columns = items.split('|');

        for ( var c in columns )
        {
            html += '<div class="column';

            if ( c == 0 )
            {
                html += ' first';
            }

            html += '"><ul class="sortable-list">';

            if ( columns[c] != '' )
            {
                var items = columns[c].split(',');

                for ( var i in items )
                {
                    html += '<li class="sortable-item" id="' + items[i] + '">';

                    //---------This Line Isn't Working--------->
                    $('#' + items[i]).load(items[i] + '.html');
                    //---------This Line Isn't Working--------->

                    html += '</li>';
                }
            }

            html += '</ul></div>';
        }

        $('#example-2-3').html(html);
    }

Update #2:

I’ve been looking up exactly what each JavaScript command in the example does and I think I’ve figured out the problem. I can’t just load the page, I need to append the code from the external page to the html variable. I think I need to use the .get command, something like:

var pagedata = '';
.get(items[i] + '.html', function(pagedata); 
html += pagedata;

Anyone know what the correct syntax to accomplish this would be?

Answer 1

I finally got the code to work. Here is the full code (not including jquery-ui related code). External pages need to be named the same as the list id.

HTML

    <div id="example-2-3">

                <div class="column first">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id1"></li>
                        <li class="sortable-item" id="id2"></li>
                        <li class="sortable-item" id="id3"></li>
                    </ul>

                </div>

                <div class="column">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id4"></li>
                    </ul>

                </div>

                <div class="column">

                    <ul class="sortable-list">
                        <li class="sortable-item" id="id5"></li>
                        <li class="sortable-item" id="id6"></li>
                    </ul>

                </div>

    </div>

Script

$(document).ready(function(){

    window.onload = loadItemsFromCookie('cookie-2');
    // Get items
    function getItems(exampleNr)
    {
        var columns = [];

        $(exampleNr + ' ul.sortable-list').each(function(){
            columns.push($(this).sortable('toArray').join(','));                
        });

        return columns.join('|');
    }

    // Load items from cookie
    function loadItemsFromCookie(name)
    {
        if ( $.cookie(name) != null )
        {
            renderItems($.cookie(name));
        }
        else 
        {
            alert('No items saved in "' + name + '".');
        }   
    }

    // Render items
    function renderItems(items)
    {
        var html = '';
        var pagedata = '';

        var columns = items.split('|');

        for ( var c in columns )
        {
            html += '<div class="column';

            if ( c == 0 )
            {
                html += ' first';
            }

            html += '"><ul class="sortable-list">';

            if ( columns[c] != '' )
            {
                var items = columns[c].split(',');

                for ( var i in items )
                {
                    html += '<li class="sortable-item" id="' + items[i] + '">';

                    var pagedata = '';
                    var scriptUrl = items[i] + ".html"
                    $.ajax({
                        url: scriptUrl,
                        type: 'get',
                        dataType: 'html',
                        async: false,
                        success: function(data) {
                            result = data;
                            html += data;
                        } 
                    });

                    html += '</li>';
                }
            }

            html += '</ul></div>';
        }

        $('#example-2-3').html(html);
    }

    $('#example-2-3 .sortable-list').sortable({
        connectWith: '#example-2-3 .sortable-list',
        update: function(){
            $.cookie('cookie-2', getItems('#example-2-3'));
        }
    });

});

</script>