jQuery Sortable save new order to database

[eluser]ZioN[/eluser]
I've been looking for quite some time for a way to save the new 'order'.

I want to let the users of my system re-order a list. But I cannot get it to save it to the database.

View:

Code:

$( document ).ready(function() {
    $( "#sortable" ).sortable({

      placeholder: "ui-state-highlight",
            update: function(event, ui){
     data: $(this).sortable("serialize"),

            $.ajax({
                url: "/ci/acp/save_order",
                type: 'POST',
                data: {
                    'order': $( "#sortable" ).sortable('toArray'),
                },
                success: function (data) {
                    $("#test").html(data);
                }

            });
                      
            }
                
        });

    $( "#sortable" ).disableSelection();
});


echo '<li id="item-'.$row-&gt;id .'" class="ui-state-default">';

Controller:

Code:

function save_order()
    {    
  $items = $this->input->post('item');
  $total_items = count($this->input->post('item'));
    for($item = 0; $item < $total_items; $item++ )
    {

            $data = array(
                'id' => $items[$item],
               'order' => $item+1
            );

             $this->db->where('id', $data['id']);

   $this->db->update('pages', array('order' => $data['order']));
   echo $this->db->last_query();
}
}

It seems the ID is not coming through:
UPDATE `pages` SET `order` = 1 WHERE `id` IS NULL

[eluser]CroNiX[/eluser]
Try

Code:

function save_order()
{    
  $items = $this->input->post('item');

  foreach($items as $order => $item_id)
  {
     $this->db
       ->where('id', $item_id)
       ->update('pages', array('order' => $order + 1));
  }
}

[eluser]CroNiX[/eluser]
If that doesn't work try doing a

Code:

print_r($items); die();

right after you retrieve 'items' from post

Also, in your ajax call, I think you should only be sending

Code:

data: {
   'items': $(this).sortable("serialize")
},

[eluser]ZioN[/eluser]
Hi CroNiX,

Thank you for your reply.
I'm fairly new to AJAX but i'm trying

I'm getting an
"Message: Invalid argument supplied for foreach()"

print_r($items); does not return anything.

var_dump($_POST); returns:

Code:

array(1) { ["items"]=> string(26) "item[]=1&item;[]=3&item;[]=2" }

[eluser]CroNiX[/eluser]
What does your UL HTML look like? Do you have id's set for each LI similar to below?

The UL

Code:

<ul id="sort">
  <li id="s_1">The First</li>
  <li id="s_2">The Second</li>
</ul>

The sortable js

Code:

$('#sort').sortable({
  update: function(evt, ui) {  
    $.ajax({
      type: 'POST',
      url: '/the_url_to_save',
      dataType: 'json',
      data: $('#sort').sortable('serialize'),
      success: function(msg) {
        console.log(msg);
      }
    });
  }
});

The receiving controller

Code:

function the_url_to_save()
{
  $ids = $this->input->post('s', TRUE);  //this is just "s", because that is what my id's started with, "s_{id}". Sortable() does this for you
  echo json_encode($ids); //just echo back to controller so it will display in console
}

[eluser]ZioN[/eluser]

Code:

<ul id="sort">
  &lt;?php  

   foreach($pages as $row){
   echo '<li id="s_'.$row-&gt;id .'" class="ui-state-default">';
   echo $row->page_title;
echo "</li>";
}
echo "</ul>";

With your code I see

Code:

["1", "3", "2"]

in my console.

[eluser]CroNiX[/eluser]
That seems about right. That would mean the order of id 1 is first, id 3 is second, and id 2 is third.

So now in the the_url_to_save() method,

Code:

function the_url_to_save()
{
  $ids = $this->input->post('s', TRUE);  //this is just "s", because that is what my id's started with, "s_{id}". Sortable() does this for you

  foreach($ids as $order => $item_id)
  {
     $this->db
       ->where('id', $item_id)
       ->update('pages', array('order' => $order + 1));
  }
  //send some sort of status back to jquery, after YOU do some checking...
  echo json_encode(array('status' => TRUE));
}

You'd actually do that db stuff in a model and return the result to the controller, but this should now work as is.

[eluser]skunkbad[/eluser]
I don't know if it would be of any help, but Community Auth has an example of a draggable/droppable/sortable file uploader. It couldn't hurt to look at it.

[eluser]ZioN[/eluser]
CroNiX,

Thank you so much. It did the trick.

I will go over the code and try to figure out what it's doing.

And clean the code (doing the db stuff in the model).