sending jQuery sortable data via ajax

Question

I am working with jQuery Sortable and twitter bootstrap as well. I have table rows that I am trying to sort. The drag and drop is working fine but I am trying to send the new sort order via ajax which is not picking up/sending the sort order and when i try to alert the data it seems empty.

This is my PHP code which is using loop to pull the records from MySQL

<table class="table table-striped table-bordered ">
    <thead>
    <tr>
        <th> Slide Title</th>
        <th> Action</th>
    </tr>
    </thead>
    <tbody>
    <?php
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        ?>

        <tr id="<?php echo $row['id']; ?>">
            <td>
                <?php echo $row['title']; ?>

            </td>
            <td>
                <div class="btn-group pull-right">
                    <button data-toggle="dropdown" class="btn btn-small btn-info dropdown-toggle">
                        Action<span
                            class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="slide-edit.php?id=<?php echo base64_encode($row['id']) ?>">Edit</a>
                        </li>
                        <li>
                            <a href="slides.php?delete=<?php echo base64_encode($row['id']) ?>">Delete</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>

    <?php
    }

    ?>

    </tbody>
</table>

and this is the java script that is doing the sorting and then sending data to a file called slides.php

$(document).ready(function(){

    $(function() {
        $('table').sortable({
            items: 'tr',
            opacity: 0.6,
            axis: 'y',
            stop: function (event, ui) {
                var data = $(this).sortable('serialize');
                alert(data);
                $.ajax({
                 data: data,
                 type: 'POST',
                 url: 'slides.php'
                 });
            }
        });
    });

});

What I feel is my variable data var data = $(this).sortable('serialize'); is not working, if i send a static variable then I am able to see that in $_POST

I will really really appreciate any assistance in this.

Answer 1

I ended up following up the concept mentioned on this link to do my task, for some reason current solution was not working with <table> so I just re wrote the html part using <ul></ul> and it worked.

I hope this helps anyone out there having the same problem.