Jquery sortable table rows in ajax table

Hi,

I have a table which is loaded via ajax into a placeholder.

I'm trying to add jQuery sortable to the loaded table so that I can change the order of the rows, but for some reason I can't get it to apply. I'm guessing this is because the table is loaded dynamically.

Here's the jQuery, this is placed inside $(document).ready(); and after the table has been loaded.

$( ".sortable" ).sortable({ handle: '.handle' });
        $( ".sortable" ).disableSelection();

        $( ".sortable" ).on( "sortstop", function( event, ui ) {
            var order = $('.sortable').sortable("toArray");

            $.ajax({
                type: "POST",
                url: "<?php echo Helper\HTML::linkToController('page', 'block_reOrder') ?>" + order
            }).done(function( msg ) {
            });
        });

Select allOpen in new window

I'm loading the table like this, this function is called from within the $(document).ready(), and before the sortable code.

function loadBlocks() {
        var blockId = $('#block_id').val();
        var blockAreaId = $('#block_area_id').val();
        var pageId = $('#id').val();

        $.ajax({
            method: "POST",
            url: "<?php echo Helper\HTML::linkToController('page', 'ajax_blocks') ?>",
            data: { controller: 'page', page_id: pageId, block_id: blockId, block_area_id: blockAreaId }
        }).done(function(response) {
            $('#blocks').html(response);
        });
    }

Select allOpen in new window

My table looks like this

<section id="blocks" class="hidden" style="display: block;">
<table class="standardForm">
    <tbody><tr>
        <th width="80" style="font-weight: normal;">Add block </th>
        <td>
            <div class="styleSelect" style="float: left;">
                <select name="block_area_id" id="block_area_id">
                    <option value="">Select a block area...</option>
                                                <option value="2">Footer</option>
                                                    <option value="1">Header</option>
                                                    <option value="3">Sidebar</option>
                                        </select>
            </div>
            <span style="display: block; width: 40px; float: left; height: 20px;">&nbsp;</span>
                    </td>
    </tr>
</tbody></table>

        <div class="blockArea">
            <h2>Footer</h2>

            <table>
                <tbody class="sortable">
                                            <tr id="_18">
                                <td>This is my new block <a class="deleteBlock" href="/digitalcmsv5/admin/page/block_remove/18"><span class="fa fa-trash"></span></a></td>
                            </tr>
                                        </tbody>
            </table>
        </div>
            <div class="blockArea">
            <h2>Header</h2>

            <table>
                <tbody class="sortable">
                                            <tr id="_17">
                                <td>Call to action panel <a class="deleteBlock" href="/digitalcmsv5/admin/page/block_remove/17"><span class="fa fa-trash"></span></a></td>
                            </tr>
                                        </tbody>
            </table>
        </div>
            <div class="blockArea">
            <h2>Sidebar</h2>

            <table>
                <tbody class="sortable">
                                            <tr id="_19">
                                <td>April Offer <a class="deleteBlock" href="/digitalcmsv5/admin/page/block_remove/19"><span class="fa fa-trash"></span></a></td>
                            </tr>
                                                    <tr id="_20">
                                <td>Contact Details <a class="deleteBlock" href="/digitalcmsv5/admin/page/block_remove/20"><span class="fa fa-trash"></span></a></td>
                            </tr>
                                        </tbody>
            </table>
        </div>
    </section>

Select allOpen in new window

Can anyone shed some light into why this might not be working?