How to get ul structure from HTML

Question

I am making a configuration page, that splits a category tree over 3 columns for easy browsing like:

**Column 1**            **Column 2**             **Column3**  
   Category1               Category3                Category5
    *SubCategory1*         Category4                  *SubCategory5*
   Category2                 *SubCategory4*           *SubCategory6*
     *SubCategory2*        etc.
     *SubCategory3*

I am using jsp, jquery, and struts2. What I am trying to do is configure the order in which categories/subcategories are displayed. Now I show the structure like that, and I am able to drag them from a column to another, sort the categories of a column and sort the subcategories, using jquery and modifying directly the HTML, but I don't realize how to get the data of the modified structure to persist it over my DB.

Answer 1

I'm presuming the structure gets modified by drag and drop. You can make an ajax call every time a change in the structure occurs and update the data in CategorySucategories table you have. I don't know your db structure, so I made an assumption about that too.

Answer 2

I recently had to do something similar on a personal project of mine, but never ended up actually using the feature I was writing it for, but here's the code I used:

function refactor() {
    var array = jQuery.makeArray($('ul#remapped > li:not(.target)'));
    var mappedArray = jQuery.map(array, function(i) {
        var merged = $(i).find('ul.merge > li:not(.target) > span');
        return {
            column: $(i).children('span').text(),
            merged: jQuery.map(jQuery.makeArray(merged), function(mi) { return { column: mi.innerText }; })
        };
    });

    var xml = '<columns>';
    jQuery.each(mappedArray, function(index, item) {
        xml += '\n\t<column>';
        xml += '\n\t\t<name>' + item.column + '</name>';
        if (item.merged.length > 0) {
            xml += '\n\t\t\t<merged>';
            jQuery.each(item.merged, function(mindex, mitem) {
                xml += '\n\t\t\t\t<name>' + mitem.column + '</name>';
            });
            xml += '\n\t\t\t</merged>';
        }
        xml += '\n\t</column>';
    });
    xml += '\n</columns>';

    $('div#result').load('/Tools/Csv/Refactor', { mapping: xml });
}

Basically, the user would use the UI to drag and drop as they please to create the structure they want. Then, they click a button which executes this method.

The $('ul#remapped') query is the element (in my code) that contained the new structure, and then I did some additional querying, again, based on my DOM structure, to extract the values I needed from the DOM and generate an XML string, which was then posted to the server.

I'm sure this isn't exactly what you need, but I'm hoping its close enough that you can modify it for what you need.