jQuery拖放可排序列表

Question

So I have a bit of a problem. I have created a drag and drop list within my WordPress plugin that is supposed to allow the user to order the categories, for the most Part I have this working...

The table is populated from a MySQL database:

$results = $wpdb->get_results($sql);

    foreach($results as $result)
    {
    ?>
     <tr id="list_item_<?php echo $result->priority_order; ?>" class="list_item">
                <td>
                    <?php echo $result->name; ?>
                </td>
                <td>
                    <?php echo $result->priority_order; ?>
                </td>
            </tr>
    <?php
    }

and I am using 'jquery-ui-sortable' in order to allow the table to be sortable.

here is my JQuery for making the list drag-able and to update the list:

$('.list').sortable(
{
    items: '.list_item',
    opacity: 0.6,
    cursor: 'move',
    axis: 'y',
    update: function()
    {
        var order = $(this).sortable('serialize') + '&action=update_order';
        $.post(ajaxurl, order, function(response)
        {
            //alert(response);
        });
    }
});

---

here is the PHP used to update the database with the new order:

function save_order()
{
  global $wpdb;

  $table_name = $wpdb->prefix . "categories";
  $sql = "SELECT * FROM ".$table_name." ORDER BY priority_order ASC";

  $results = $wpdb->get_results($sql);
  $results = parseObjectToArray($results);

  $new_order = $_POST["list_item"];

  $counter = 0;
  foreach($new_order as $v)
  {
    if(isset($results[$v]["priority_order"]))
    {
        $update_sql = "UPDATE ".$table_name." SET priority_order='".$counter."' WHERE category_id='".$results[$v]["category_id"]."'";
        $wpdb->query($update_sql);

        $counter++;
    }
  }
  die();
}
add_action('wp_ajax_update_order','save_order');

// Converts StdObject to regular array
function parseObjectToArray($object)
{
$array = array();

  foreach($object as $o)
  {
    if (is_object($o))
    {
      $array[] = get_object_vars($o);
    }
  }
  return $array;
}

---

My problem is that while the list updates perfectly the firs time, the next serialized array that is sent assuming the page has not been manually refreshed is now updating incorrectly. This is because the new list and the newly updated one from the database are no longer synchronized.

This is because I am using the array index to match up what needs updating, but after the initial change, the new list index and the index coming from the array no loner match...

Does anyone have any idea's on how I can solve this problem? I have looked around quite a bit and most of the code Ive found is similar to mine and I cant see any noticeable difference that might cause mine to break. Will I need to refresh the page after each update?

Answer 1

I found the answer myself yet again, haha...

I was concentrating to much on the pirority_order field, instead I sent each category ID and used SQL to ORDER BY priority_id, then simply with a counter I could assign a new order.

global $wpdb;

$table_name = $wpdb->prefix . "categories";
$sql = "SELECT * FROM ".$table_name." ORDER BY priority_order ASC";

$results = $wpdb->get_results($sql);
$results = parseObjectToArray($results);

$new_order = $_POST["ebs_list_item"];

$counter = 0;
foreach($new_order as $v)
{
    $update_sql = "UPDATE ".$table_name." SET priority_order=".$counter." WHERE id=".$v;
    $wpdb->query($update_sql);

    $counter++;
}
die();

---

<tr id="list_item_<?php echo $result->id; ?>" class="list_item">
    <td>
        <?php echo $result->name; ?>
    </td>
    <td>
        <?php echo $result->priority_order; ?>
    </td>
</tr>