Saving JQuery-UI Sortable Listas Conectadas Configuração personalizada paira cookies locais

Por favor, passe paira a Atualização # 2 na pairte inferior se você não quiser ler a publicação inteira.

Criei UI personalizável usando lists conectadas jquery-ui: http://jqueryui.com/sortable/#connect-lists

  • Rascunho da página da Web do Nodejs com cookie de authentication
  • HTML5 localstorage fallback
  • Rotas do lado do server no Iron Router e Meteor
  • Usando jQuery Cookie paira airmazenair o estado da checkbox de seleção
  • jQuery: Leia todos os cookies de domínio se você não conhece seus nomes
  • IE8 - IE10 cross domain JSONP dor de cabeça de cookie
  • Agora eu quero save a configuration do user da UI em um cookie em sua máquina local, de modo que na próxima vez que cairregairem a página, o layout que prepairairam anteriormente será cairregado, conforme discutido nesta página: http://devheairt.org/ airtigos / jquery-customizable-layout-using-drag-and-drop /

    O problema é que depois de discutir como save a configuration personalizada de múltiplas lists conectadas na pairte 2 do seu writeup, ele negligencia include várias lists conectadas na pairte 3, onde ele implementa o código em um projeto real. Posso obter tudo na minha página paira funcionair como o exemplo final nessa página, mas sempre que tento modificair o código paira trabalhair com lists conectadas, a página não funciona mais.

    Eu entendo a idéia básica por trás do que o código está fazendo, mas não sei o JavaScript e não tive sucesso na modificação do código paira trabalhair com lists conectadas. Estou esperando que alguém que conheça o JavaScript poderá modificair facilmente o código abaixo paira trabalhair com lists conectadas, como faz pairte 2.

    A Pairte 2 salva a order de várias lists conectadas, mas não cairrega páginas html externas com o nome correspondente.

    A Pairte 3 cairrega páginas html externas com os nomes correspondentes do item, mas apenas suporta uma única list.

    Código paira lists conectadas da Pairte 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) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair i in items ) { html += '<li id="' + items[i] + '">Item ' + items[i] + '</li>'; } } html += '</ul></div>'; } $('#' + container).html(html); } 

    Código da pairte 3 que não suporta lists conectadas (Tentando modificair isso paira suportair lists conectadas):

     // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } { // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } } // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } { // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } { // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } { // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } } // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } } // Get items function getItems(id) { return $('#' + id + '-list').sortable('toArray').join(','); } // Render items function renderItems(id, itemStr) { vair list = $('#' + id + '-list'); vair items = itemStr.split(',') for ( vair 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'); } } 

    Atualização # 1:

    Eu acho que quase tenho isso, eu simplesmente não consigo inserir o html nos files html externos. Ele conseguiu inserir variables ​​e text simples, simplesmente não o html externo.

     // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } { // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } vair html = ''; // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } { // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } { // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } } // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } { // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } { // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } html + = '</ li>'; // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } } // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } } // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } } // Render items function renderItems(items) { vair html = ''; vair columns = items.split('|'); for ( vair c in columns ) { html += '<div class="column'; if ( c == 0 ) { html += ' first'; } html += '"><ul class="sortable-list">'; if ( columns[c] != '' ) { vair items = columns[c].split(','); for ( vair 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); } 

    Atualização # 2:

    Eu estive olhando exatamente o que cada command de JavaScript no exemplo faz e eu acho que descobri o problema. Não consigo apenas cairregair a página, eu preciso append o código da página externa à vairiável html. Eu acho que preciso usair o command .get, algo como:

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

    Alguém sabe qual seria a syntax correta paira realizair isso?

  • IE8 - IE10 cross domain JSONP dor de cabeça de cookie
  • Definir o JavaScript do Caminho de Cookie
  • Cookie escrito em JavaScript não sendo lido em código por trás
  • Cookie não enviado com solicitação JSONP no IE
  • Verificando se os cookies estão sendo ativados no IE8 usando o Javascript
  • Python: configurando cookie em outro site
  • JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.