Ticket #4564 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

Draggable+Sortable Demo duplicates DOM Ids

Reported by: dmfontz Owned by:
Priority: minor Milestone: 1.8.13
Component: ui.draggable Version: 1.7.1
Keywords: demo duplicate id Cc:
Blocking: Blocked by:

Description

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.

Change History

comment:1 Changed 5 years ago by joern.zaefferer

  • Component changed from [meta] ui.demos to ui.draggable
  • Milestone changed from TBD to 1.8

comment:3 Changed 3 years ago by scott.gonzalez

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

comment:4 Changed 3 years ago by Kato Kazuyoshi

  • Status changed from new to closed
  • Resolution set to fixed

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

Changeset: 98fcb477d6a7091b21e9b7bc0b8c28f798954d47

comment:5 Changed 3 years ago by Kato Kazuyoshi

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

Changeset: 201b5ed48c0b848a38e8e43c4f187c44e2e16ddd

comment:6 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.13

comment:7 follow-up: ↓ 9 Changed 3 years ago by 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.

comment:8 Changed 3 years ago by scott.gonzalez

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.

comment:9 in reply to: ↑ 7 Changed 3 years ago by 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.

Note: See TracTickets for help on using tickets.