Question

I’m using jQuery ui’s sortable. A list of objects is retrieved from the db an dynamically put into a list, the user drag and drops the list objects and the new order of the list should get saved.

Below is the jQuery code for sortable, which include creating an array of the new list order. However, next step is to do something so that I’m able to use this array in my php code.

The thing is that the user, apart from sorting the list objects also should be able to add some comments and do some other stuff and then submit it all. That is, I’m using a form for this. By that reason I must be able to put in the array with the list order into the form in some way, and here’s where I need some help.

What method should I use? Ajax? Local storage? How could this be accomplished?

    $('#listElements').sortable({

        update: function(event, ui) {
            var order = []; 
            $('.listObject li').each( function(e) {
                order.push($(this).attr('id'));
            });
        }
    });

Answer 1

You’ll want to use AJAX to send the order array to PHP like so:

$('#listElements').sortable({
    update: function (event, ui) {
        var order = [];
        $('.listObject li').each(function (e) {
            order.push($(this).attr('id'));
        });
        $.ajax({
            url: "/save_order_to_db",
            type: "post",
            data: {
                order_data: order
            }
        }).success(function (data) {
            console.log(data);
        });
    }
});