How to implement a jQueryUI sortable list performing AJAX HTTP requests?

Question

I am using Ruby on Rails 3.1.1 and jQueryUI 1.8.14. I would like to implement a jQueryUI sortable list and to save related item position changes in my application database. To implement\make that I am planning to perform an AJAX HTTP request (of course, including proper information\data in order to correctly make that effective\easy as well as possible) each time an user changes an item position.

How to perform an AJAX HTTP request when the item order changes? What data do you advice to consider\send through the AJAX HTTP request?

Answer 1

i recently used jqueryUI sortable jquery ui sortable doc

i use a db field called 'order_by' INT field.

what you need is just to apply the jqueryUI sortable() to the elements list you want and then pass via ajax the serialized new order (check ui options for sortable, it has serialize or toArray {option}) to your controller page.

you save the new order into db and you've fiished. In my case each 'order_by' fields is updated everytime i save the new order.

edit

$("#test-list").sortable({
                    cursor: 'move',
                    placeholder:'sortbale-highlight-holder',
                    tolerance:'pointer',
                    update: function() {
                    new_order = $(this).sortable("serialize");
                    somenthing_was_ordered = 1;
                }
        });

logic i used is:

user change order and i set the new order in a global var. then i use a submit input to send the ajax request and save the new order.

in update: function(){ } you can launch a request anytime, cause you can return anytime the new order into an ajax call, but i preferred to save some memory for server requests :)