Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TableDnD onDrop event not firing

I'm sure this is something very simple, it usually is.

$('#sort-table').tableDnD({
    onDragClass: "dnd_drag",
    onDragStart: function(table, row) {
        console.log("start drag");
    },
    onDrop: function(table, row) {
        console.log($.tableDnD.serialize());
    },
    dragHandle: ".dragHandle"
});

I have the above code in action for tableDnD, the jQuery table sorting plugin. This is the exact code from the samples they provide, but it doesn't fire the onDrop event correctly when I drop an item in the table. I get no response in the console. The table does initialize, and the drag handle works properly, so I at least know that portion of the code is correct. The only thing I can't get to work is the onDrop command.

Update:
I updated the code above to add an onDragStart and onDragClass, both of which work perfect, it is only the onDrop function failing.

This is my general table layout:

<table id="sort-table">
    <tbody class="sort-items">
        <tr class="1">
            <td class="dragHandle"></td>
            ...
        </tr>
        ...
    </tbody>
</table>
like image 354
Beau Avatar asked Aug 01 '12 18:08

Beau


3 Answers

You must define tr[id] attribute to make onDrop work. This is because onDrop only fire when row order changed. However, without specifying tr[id] attribute, tableDnD.serialize() will think there was not any re-order. (Bug for sure)

like image 119
crab Avatar answered Oct 21 '22 12:10

crab


Well my first question and I got the answer to it. Hope this helps someone in the future.

The issue was with the actual ID's of my table rows. I actually had use of uuid which meant that my rows actually had an ID similar to "26b5122e-bbb8-11e1-9c53-d4856404b576". Apparently TableDnD does some sort of serializing of the data that broke my ID's apart and only grabbed the last group of numbers, which for most items were the same.

The line from the jquery.tablednd.js file that was causing the issue was this (around line 380):

...
var rowId = rows[i].id;
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
    rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
}

result += tableId + '[]=' + rowId;
...

I simply removed the serializer since I knew I wouldn't need it for my row IDs. Then I passed the row ID along myself. This was the result.

...
var rowId = rows[i].id;

result += tableId + '[]=' + rows[i].id;
...

So if you use dashes in your row IDs, make sure to change this to make the onDrop fire correctly.

like image 33
Beau Avatar answered Oct 21 '22 10:10

Beau


Quick fix.

If you want onDrop to work without having row.id, you can edit plugin.

Replace this (line 255 is where function starts - currentOrder)

        var rows = this.currentTable.rows;
        return $.map(rows, function (val) {
            return ($(val).data('level') + val.id).replace(/\s/g, '');
        }).join('');

With this

    return $(this.dragObject).index();
like image 1
Mr Br Avatar answered Oct 21 '22 11:10

Mr Br