Question

I have a table structure as follows. Now I need to sort these nested tables separately. Forexample: sorting chapter’s row will only update chapters order in a separate table. Whereas, sorting items will update their order in another table.

I managed to setup the code and sorting. However, when I drag the items from chapter 4, it pass on the order of the items in from chapter 1 since they come before chapter 4???

Could someone help me with sorting only relevant items??

NOTE: This list is dynamic coming from database. So I am interested in one jquery code covering all the ordering bits.

        <table id=subsortsortable>
        <tbody class=content>
            <tr id="chapter_1"><td>Chapter one</td></tr>
            <tr id="chapter_2"><td>Chapter two</td></tr>
            <tr id="chapter_3">
                <td>
                    <table>
                        <tbody class=subcontent>
                            <tr id="item_31"><td>three.one</td></tr>
                            <tr id="item_32"><td>three.two</td></tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr id="chapter_4">
                <td>
                    <table>
                        <tbody class=subcontent>
                            <tr id="item_41"><td>four.one</td></tr>
                            <tr id="item_42"><td>four.two</td></tr>
                            <tr id="item_43"><td>four.three</td></tr>
                            <tr id="item_44"><td>four.four</td></tr>
                            <tr id="item_45"><td>four.five</td></tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr id="chapter_4"><td>Chapter Four</td></tr>
        </tbody>
    </table>

The code I am using is as follows:

//for sorting chapters - which is outer table
$("#subsortable tbody.content").sortable({      
        opacity: 0.7, 
        cursor: 'move', 
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true,
        update: function(){
            var order = $('#subsortable tbody.content').sortable('serialize') + '&action=updateChaptersOrder';
            $.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
            });

        }

    });

// For sorting and updating items within a specific chapter - which is nested tbody
$("tbody.sortItems").subcontent({

        opacity: 0.7, 
        cursor: 'move', 
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true,
        update: function(){
            var order = $('tbody.subcontent').sortable('serialize');// + '&action=updateListings';
            $.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
            });

        }

    });

Answer 1

I have got the answer to my own question.. In case someone else encounter the same problem. I have changed the following code inside the internal table:

var order = $('tbody.subcontent').sortable('serialize'); 

to

var order = $(this).sortable('serialize');