Persist nested jquery sortable list

Question

The Problem:

I have a nested list on my configuration page that looks like this:

<a id='Save'>Save<a>
<ul id='configuration-list'>
   <li id='e1'>Elem A
      <ul>
          <li id='ey'>Elem Y </li>
          <li id='ex'>Elem X
             <ul><!-- and so on until 5 levels of nesting --></ul>
          </li>
          <li id='ez'>Elem Z </li>
      </ul>
   </li>
   <li id='e45'>
      <ul>
         <!-- more li's and ul's nesting here -->
      </ul>
   </li>
 <!-- even more li's and ul's nesting here -->
   <li id='eN'>
   </li>

</ul>

Each li on the list can have another unordered list inside, which contains li, that can contain other unordered list inside.

All the list are sortable, using jquery ui.sortable plugin. Items cannot be switched through list.

The total of nodes in the list is more than 1k.

When the configuration is saved (Save link) I have to send the list order configuration (form the first to the deepest node) to the server which will parse it and save all the elements order in the database. For this, php is used.

The questions:

Whats the 'best' or the less wrong way to parse the configuration, and how should I pass it to my php parser?

Is there a method similar to $('#configuration-list').sortable('serialize') or $('#configuration-list').sortable('toArray') that generates me a xml, JSON or similar with all the structure? An extension of ui.sortable or another plugin that have this functionality?

Thanks in advance.

Answer 1

It's not clear if <li> contains radio/checks/textboxes, so the suggestion may vary. A lot of time ago (5-6 years i think) I've encountered similar situation, and that time i've used names recalling array structures (if i remember correctly, too old memories :/)

I.e.

<input type="text" name="nodes[node1][item1]" />
<input type="text" name="nodes[node1][item2]" />

Maybe it can help you.

Answer 2

.sortable('serialize') takes an optional second parameter (or, serialize() takes a single parameter. God I hate the plugin apis):

make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

Answer 3

When you are saving large nested sets you should consider the Nested Set Model, it's a different approach for storing hierarchical data in a flat table, which MySQL or any other non-XML database is. NSM works with two numbers, left and right for defining the range of a set and all childs in it.

A link which was very usefull to me: http://dev.mysql.com/tech-resources/articles/hierarchical-data.html

In your PHP controller (or whereever you handle / control your data before saving it) you can simply loop through your configurations. I prefer to use array values for forminputs in this case, just like the other posters said.

You should use form element for this, i prefer hidden fields, give the name of the field something like node_# where # represents the parent-id for the child. And the value must then be the ID of the current child.

Use a simple for-loop to loopthrough 'node_#' and get the arrayvalues from the element-value 1 by 1. Increasing the sortorder for each node with the same parent by 1 when a node passes by.

Sample:

<input type="hidden" name="node_1[]" value="4"/> 
<input type="hidden" name="node_1[]" value="5"/>
<input type="hidden" name="node_1[]" value="6"/>
<input type="hidden" name="node_1[]" value="7"/>

Then nodes 4 t/m 7 will be stored as an array in $_POST["node_1"].