Save Jquery sortable state to DB

[eluser]Ludovic-r[/eluser]
Hi everyone,


I've made a sortable list with the Jquery UI sortable (and it works well) but I need to save the current state of list in my DB.

Example : I drag and drop the item1 under the item3 and I need to click on a button called "Save rank state" to save the rank in my DB. Maybe I need to call a function in a controller to store the new rank in the DB, but how? Ajax maybe?

In my DB I have a field called "Rank" filled with numbers. That's what I need to update

How can I do that please? Any ideas? I'm stuck on this


Thanks!

[eluser]Eric Barnes[/eluser]
I do it through ajax and here is an example controller:

Code:

/**
* Order List Items
*
* Used to order by drag and drop.
*
* @return     bool
*/
public function order_list()
{
    $order = $this->input->post('list_item');

    if ($order AND $this->list_library->order($order))
    {
        $json['result'] = 'success';
        $json['message'] = $this->lang->line('lang_order_content');
    }
    else
    {
        $json['result'] = 'error';
        $json['message'] = $this->lang->line('lang_order_content_fail');
    }

    exit(json_encode($json));
}

Example JS:

Code:

$(".list_wrap").sortable({
    opacity: 0.6,
    cursor: 'move',
    tolerance: 'pointer',
    revert: true,
    placeholder: 'ui-state-highlight',
    handle: 'span',
    items: 'div:not(.disabled)',
    delay: 500,
    distance: 30,
    update: function () {
        var order = $(this).sortable("serialize");
        $.post("http://example.com/pages/order_list", order);
    }
}).disableSelection();

[eluser]Ludovic-r[/eluser]
Many thanks for your answer, it helps a lot! But now what can I do to make a button like "Save order" and give the list order to my controller?

[eluser]Ludovic-r[/eluser]
Oh sorry, I didn't mind that it save the list automaticly (my fault)

[eluser]Ludovic-r[/eluser]
Ok now I can't access to my $.post data from my Controller. I have this :

var order = $(this).sortable("serialize");
$.post("http://localhost:8888/codeigniter/index.php/admin/order", order);

And in my controller this :

function order()
{
$order = $this->input->post('list_item');

echo $order;
}

I echo it just to see if it works, I know it's not its place, but unfortunately it doesn't work any ideas?

[eluser]Eric Barnes[/eluser]
Your post var is probably not list_item. The best method is to use firebug and you can see exactly what is posted.

[eluser]Zehee[/eluser]

Code:

jQuery(function($){
    var $sort = $('#openTaskLists');
    $sort.sortable({
        axis:'y',
        cursor: 'move',
        items: 'li.t-active',
        update:function(event,ui){
            // this is the item you just draged
            var item = ui.item;
            var container = item.parent();
            var reorder = [];
            container.children('li').each(function(i){
                // save the item id order in array
                reorder[i] = $(this).attr('id');
            });
            
            $.ajax({
                method:'post',
                url:'<?php echo get_url ('task', 'reorder_tasks_ajax')?>',
                // post the container id, draged item id, all items order
                data:{
                    'task_list_id':container.attr('id'),
                    'item':item.attr('id'),
                    'reorder':reorder
                }
                
            });
        }
    });
});

I referenced basecamp(a product powered by 37signals)

[eluser]Ludovic-r[/eluser]
Ok, will try that, but if I need to call the sorted order in my Controller should I just type $this->input->post('my_var') ? I really need to communicate with my controller to store the list in my DB.

Thanks for your answer!