Question

I need a database that contains a set of pages: their ID, parent ID (0 if no parents) and order.

+------+------------+-----------+-------------+
|  ID  |  parentID  |   order   |    Name     |
+------+------------+-----------+-------------+
|  1   |      0     |     1     |    page 1   |
|  2   |      1     |     1     |    page 2   |
|  3   |      1     |     2     |    page 3   |
|  4   |      0     |     2     |    page 4   |
|  5   |      0     |     3     |    page 5   |
+------+------------+-----------+-------------+

Then I have a sortable nested ul li that works with jQuery such as this

<ul id="sortablenested">
  <li>page 1
  <ul>
     <li>page 2</li>
     <li>page 3</li>
  </ul>
  </li>
  <li>page 4
  <ul></ul>
  </li>
  <li>page 5
  <ul></ul>
  </li>
</ul>

Now if it wasn’t nested, I would just use an hidden input within each li tag passing an array and then go through the array with a foreach and write the position in the DB but when I move a li from the root ul to a sub ul with the same method it wouldn’t nest it but just go through the array ignoring that it’s a child.

What is the best/right method to submit the order to the database?

Answer 1

I would either send whole HTML of the list tree (innerHtml) if it’s this simple, or write JavaScript function to convert it to JSON, and send that. And parse that on server.

See How to serialize DOM node to JSON even if there are circular references?