Saving JQuery-UI Sorting Connected Lists Customizing to a Local Cookie

Question

Please skip to update No. 2 at the bottom if you do not want to read the entire post.

I created a custom interface using jquery-ui linked lists: http://jqueryui.com/sortable/#connect-lists

Now I want to save the user interface UI configuration to a cookie on my local machine so that the next time they load the page, the layout that they preinstalled as described on this page will be loaded: http://devheart.org/articles / jquery-customizable-layout-using-drag-and-drop /

The problem is that after discussing how to save the user configuration of several connected lists in part 2 of his record, he neglects to include several linked lists in part 3, where he implements the code in the actual design. I managed to get everything on my page to work as the last example on this page, but whenever I try to change the code to work with linked lists, the page no longer works.

I understand the basic idea of ​​what the code does, but I don’t know JavaScript and had no success in modifying the code to work with linked lists. I hope someone who knows JavaScript can easily modify the code below to work with linked lists, as part 2 does.

Part 2 preserves the order of several connected lists, but does not load external html pages with the corresponding name.

Part 3 loads external html pages with the corresponding element names, but supports only one 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, which does not support connected lists (attempt to change 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 that I almost do not have it, I just can not insert it html from external html files. He was able to force him to insert variables and plain text, rather than 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 was looking for exactly what each JavaScript command in the example does, and I think I figured out this problem. I cannot just load the page, I need to add 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; 

Does anyone know what the correct syntax for this would be?

Answer 1

I finally got the code to work. Here is the complete code (not including jquery-ui code). External pages should 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>