Draggable+Sortable Demo duplicates DOM Ids

[dmfontz]

In this demo the draggable element is #draggable. When it is dropped in the sortable a duplicate element is created with the same id, thus creating multiple elements in the document with the same id. This can cause problems.

[theycallmeswift]

Fixed by switching the id to a class.

​https://github.com/theycallmeswift/jquery-ui/commit/233535ee4c74eb6c63dcedf9c70390a620085bcf

[Scott González]

I think a better fix is to actually deal with the duplicate id problem since users will run into this all the time.

[Kato Kazuyoshi]

Draggable: Remove id when cloning helpers. Fixes #4564 - Draggable+Sortable Demo duplicates DOM Ids.

Changeset: 98fcb477d6a7091b21e9b7bc0b8c28f798954d47

[Kato Kazuyoshi]

Draggable: Remove id when cloning helpers. Fixes #4564 - Draggable+Sortable Demo duplicates DOM Ids. (cherry picked from commit 98fcb477d6a7091b21e9b7bc0b8c28f798954d47)

Changeset: 201b5ed48c0b848a38e8e43c4f187c44e2e16ddd

[bjorn]

This fix introduces a problem, at least in our application. If an item is moved from a list of draggables into a sortable, and its receipt is processed using .sortable('serialize'), the serialized list will contain an empty string where the item's id should be, and thus it will not get processed. In our case, if an item is added to the sortable, sortable calls an external routine to store the new object and sort order in a database and then repopulates the sortable with the data. Upon updating to jquery-ui 1.8.13 with this fix, items dragged to the sortable appear, but the item's ID does not show up in the serialized data, so it doesn't get added to the database and disappears when the pane refreshes.

I'm not too sure about whether or not this bug is a bug--it seems that authors using jquery-ui should take steps to make sure that when their action is complete, there isn't a duplicate id. For example, if an item is dragged from one list to another, it should be removed from the original list.

[Scott González]

The fix is correct, cloning should never produce duplicate IDs. The check must be done upfront, it cannot be done after the sort as you're suggesting.

[eric8166]

You can search in the compress .js file for the following text: .clone().removeAttr("id").appendTo(this.instance.element).data("sortable-item"

then delete the .remove("id")

This can be a solution until more people realize the new bug on the 'serialize' was the result of this fix, and request for the id to be changed instead of completely removed.

Replying to bjorn:

This fix introduces a problem, at least in our application. If an item is moved from a list of draggables into a sortable, and its receipt is processed using .sortable('serialize'), the serialized list will contain an empty string where the item's id should be, and thus it will not get processed. In our case, if an item is added to the sortable, sortable calls an external routine to store the new object and sort order in a database and then repopulates the sortable with the data. Upon updating to jquery-ui 1.8.13 with this fix, items dragged to the sortable appear, but the item's ID does not show up in the serialized data, so it doesn't get added to the database and disappears when the pane refreshes.

I'm not too sure about whether or not this bug is a bug--it seems that authors using jquery-ui should take steps to make sure that when their action is complete, there isn't a duplicate id. For example, if an item is dragged from one list to another, it should be removed from the original list.