Question

I have multiple sortable lists that are dynamically generated from a list in MySQL. The id of each list is appended using a section id from the database. When sorted, the data is serialized and sent to sort_order_piece.php to run the MySQL query to update the order of the records, which all works fine. What doesn’t work is the way I have the following jQuery written to account for the dynamically generated ids of each list:

$(".sortme_piece").each(
    function(e) {
        num = e+1;
        $('#sortme_piece_'+num).sortable({
            placeholder: "ui-state-highlight",
            update : function () {
                serial = $('#sortme_piece_'+num).sortable('serialize');
                alert(serial);
                $.ajax({
                    url: "sort_order_piece.php",
                    type: "post",
                    data: serial,
                    beforeSend: function(){$('#updated').html('updating');},
                    success: function(data){$('#updated').html(data);},
                    error: function(){alert("theres an error with AJAX");}

                });
            }
        });
    });

This line seems to be the trouble:

serial = $('#sortme_piece_'+num).sortable('serialize');

When I view the variable in an alert box, it is blank. If I remove the appended ‘num’ and add an actual number that corresponds to one of the list ids, it works fine.

What on earth am I doing wrong? I just can’t pinpoint it.

Help and Thanks!!!

Answer 1

I changed

serial = $('#sortme_piece_'+num).sortable('serialize');

to

serial = $(this).sortable('serialize');

and that fixed it.