Save changes with nested Sortable function

I want to make a FAQ for my website which use the nested Sortable function.

I use two tables which called: option and option_connection.
I use the connection table for connecting the questions/answers from the option table. See linked images as an example.

My code I use to display the options on the frontend.

<?php
global $wpdb;
$array_zero = $wpdb->get_results("SELECT * FROM options INNER JOIN option_connection ON options.id = option_connection.child_id AND parent_id = '0'");

echo "<ol class='sortable'>";
foreach ($array_zero as $value_zero) {
  echo "<li id='optieID_$value_zero->id'><div>" . $value_zero->name . </div>";

  $array_one = $wpdb->get_results("SELECT * FROM options INNER JOIN option_connection ON options.id = option_connection.child_id AND option_connection.parent_id = $value_zero->id");
  echo "<ol>";
  foreach ($array_one as $value_one) {
    echo "<li id='optieID_$value_one->id'><div>" . $value_one->name . "</div>";

  $array_second = $wpdb->get_results("SELECT * FROM options INNER JOIN option_connection ON options.id = option_connection.child_id AND option_connection.parent_id = $value_one->id");
  echo "<ol>";
  foreach ($array_second as $value_second) {
    echo "<li id='optieID_$value_second->id'><div>" . $value_second->name . "</div></li>";
  }
   echo "</ol></li>";
  }
 echo "</ol></li>";
}
echo "</ol>";
?>

<form method="POST">
<input type="button" name="serialize" id="serialize" value="Serialize">
<input type="submit" name="save" id="save" value="Save">
</form>
<div id="show_content"></div>

My output looks like this:

Option 1
Option 1.1
Option 1.1.1
Option 1.2
Option 2
Option 2.1
Option 2.2
Option 2.3
Option 3
Option 3.1
Option 3.1.1
Option 3.2

With the following javascript I’m able to sort all the options correctly and get the serialized string when changing something:

$(document).ready(function(){

  $('.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    isTree: true,
    expandOnHover: 700,
    startCollapsed: false,
  });

 $("#serialize").click(function(){
  var input = $('.sortable').nestedSortable('serialize');
  $("#show_content").html(input);
 });
});

My Question

If I want edit the options and put 1.1.1. under 3.1 and then save the changes to the database, how am I able to achieve this?

Read more here: Save changes with nested Sortable function

Leave a Reply

Your email address will not be published. Required fields are marked *