Topic: Update feature not working for drag and drop table

Problem: I have a table for the chosen images (ones marked with a
checkbox) and that is working. However, I am trying to implement a drag
and drop table and while the dragging and dropping is working, the
update is not working.

This is the part of the code that creates the drag and drop feature of the table
    <script>
    $(document).ready(function() {       
        $('#sortable1').sortable({
            axis: 'y',
                    update: function(event, ui) {
                order = $(this).sortable('toArray');
                alert(order);
                var id = $('body').data('id');
                alert(id);
                $.post('/products/' + id, {'order': order});
                //$.get('/products/' + id + "?order=" + order);
//this will give you the new order list from here you can fire ajax call for updating the order
                }
            });
        });

</script>

1) app/views/products/show.html.erb contains the script for the drag and
drop table. The id of the table is "sortable1". I am using Jquery UI to
create the drag and drop feature for the table.

Line 103: $('#sortable1').sortable() creates this feature

The next lines after Line 103:
axis: 'y',
update: function(event, ui) {
        order = $(this).sortable('toArray');
        alert(order);
        var id = $('body').data('id');
        alert(id);
        $.post('/products/' + id, {'order': order});

So the chosen images can only be dragged along the y-axis (which works)
and now the update method (which i am having trouble with)

the variable order includes the array with the html ids for the chosen
images (I have them as row1,row2,row3,etc). So changing the 2nd image
with the 3rd image would alert me saying "row1, row3, row2" (Because of
"alert(order)").

The variable id contains the id of the product which we are looking at
(This is done with javascript by retrieving the html attribute "data-id"
which i have set as the id of the product).

The next part $.post method is a Jquery method that sends data to the
server. The first parameter of the $.post method is the url so it sends
data to "products/id" (This is how i have it in rails as the url) and
the next parameter is the data being sent (in this case, the variable
order).

Now what i believe is supposed to happen is that i can retrieve "order"
in rails by using params[:order]. This is the main problem.
params[:order] does not return anything


What is the problem here?

Last edited by thepal (2012-07-17 12:04:31)