1 extra cell of the table when a row is discarded using jQueryUI sort (but only for Chrome)

Question

I have an application that uses jQuery, jQuery UI and Backbone.js. Recently, an error was discovered when a row in a table, when it is discarded (jQuery sorting), is sometimes shifted along another row in another row, as if there was an extra cell, but it wasn’t checked. I just noted that this only happens in Chrome, Chromium and ChromeFrame.

Here is a screenshot of the problem area: http://img208.imageshack.us/img208/6870/screenshotkz.png

Here is a screenshot of the HTML in the Chrome validation interface: http://img16.imageshack.us/img16/6985/screenshot1wdo.png I also copied the HTML below:

<tr id="17052151" class="wo"> <td>17052151</td> <td>XXXXXXXXXXX</td> <td>XXXXXXXXXXXXX</td> <td>Parts Here</td> <td>RR</td> <td>10/28/11</td> <td>10/28/11</td> <td>10</td> <td><input type="text" class="woComment" value=""></td> <td class="removeWO">X</td> </tr> <tr id="10097756" class="wo"> <td>10097756</td> <td>XXXXXXXXXXXX</td> <td>XXXXX</td> <td>Parts Here</td> <td>NIS</td> <td>10/04/11</td> <td>10/28/11</td> <td>10</td> <td><input type="text" class="woComment" value=""></td> <td class="removeWO">X</td> </tr> <tr id="10095965" class="wo"> <td>10095965</td> <td>XXXXXXXX</td> <td>XXXXXXXXXXXXXXXX</td> <td>Parts Here</td> <td>NIS</td> <td>09/16/11</td> <td>10/10/11</td> <td></td> <td><input type="text" class="woComment" value=""></td> <td class="removeWO">X</td> </tr> 

Since this problem does not occur in Firefox or IE8, I think it might be a Chrome bug, but I wanted to see if anyone else had this problem before.

EDIT I found that calling the .render() function on my view item that a problem is occurring resolves this problem.

Answer 1

I may have completely lost your point of view, but could you clarify: do you want the whole row to be sortable, i.e. row 1, row 2 and row 3 are interchangeable by drag and drop?

If that were the case, you would make the tbody sortable, not tr; applying sorting to tr is what causes the weird behavior here, as jqueryui is trying to make the contents of tr sortable, which is horribly bad. To sort the rows, make the tbody sortable, so it tries to sort the rows of the table.

http://jsfiddle.net/cZ4n4/10/