Сохранение JQuery-UI Сортировка подключенных списков Пользовательская настройка в локальное Cookie

Пожалуйста, пропустите, чтобы обновить №2 в нижней части, если вы не хотите читать весь пост.

Я создал настраиваемый интерфейс с помощью jquery-ui связанных списков: http://jqueryui.com/sortable/#connect-lists

Теперь я хочу сохранить пользовательскую конфигурацию пользовательского интерфейса в файл cookie на своей локальной машине, чтобы в следующий раз, когда они загружают страницу, будет загружен макет, который они предварительно установили, как описано на этой странице: http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/

Проблема заключается в том, что после обсуждения того, как сохранить пользовательскую конфигурацию нескольких подключенных списков в части 2 его записи, он пренебрегает включением нескольких связанных списков в часть 3, где он реализует код в фактический дизайн. Мне удалось заставить все на моей странице работать как последний пример на этой странице, но всякий раз, когда я пытаюсь изменить код для работы со связанными списками, страница больше не работает.

Я понимаю основную идею того, что делает код, но я не знаю JavaScript и не имел никакого успеха в модификации кода для работы со связанными списками. Я надеюсь, что кто-то, кто знает JavaScript, сможет легко изменить приведенный ниже код, чтобы работать со связанными списками, как это делает часть 2.

Часть 2 сохраняет порядок нескольких подключенных списков, но не загружает внешние html-страницы с соответствующим именем.

Часть 3 загружает внешние html-страницы с соответствующими именами элемента, но поддерживает только один список.

Код для подключенных списков из части 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><ul>';
 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);
}

Код из части 3, которая не поддерживает подключенные списки (попытка изменить это для поддержки подключенных списков):

// 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 = '';
 list.append(html);
 // Load html file
 $('#' + items[i]).load('content/' + items[i] + '.html');
 }
}

Обновление # 1:

Я думаю, что у меня его почти нет, я просто не могу его вставить html из внешних html файлов. Он смог заставить его вставлять переменные и обычный текст, а не внешний html.

// Render items
 function renderItems(items)
 {
 var html = '';
 var columns = items.split('|');
 for ( var c in columns )
 {
 html += '<div><ul>';
 if ( columns[c] != '' )
 {
 var items = columns[c].split(',');
 for ( var i in items )
 {
 html += '<li 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);
 }

Обновление # 2:

Я искал точно, что делает каждая команда JavaScript в примере, и я думаю, что выяснил эту проблему. Я не могу просто загрузить страницу, мне нужно добавить код с внешней страницы в переменную html. Я думаю, мне нужно использовать команду .get, что-то вроде:

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

Кто-нибудь знает, какой правильный синтаксис для этого будет?

1 ответ

Наконец-то я получил код для работы. Вот полный код (не включая код jquery-ui). Внешние страницы должны быть названы такими же, как идентификатор списка.

HTML

<div id="example-2-3">
 <div>
 <ul>
 
 
 
 </ul>
 </div>
 <div>
 <ul>
 
 </ul>
 </div>
 <div>
 <ul>
 
 
 </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><ul>';
 if ( columns[c] != '' )
 {
 var items = columns[c].split(',');
 for ( var i in items )
 {
 html += '<li 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'));
 }
 });
});

licensed under cc by-sa 3.0 with attribution.