Opened 14 years ago
Closed 14 years ago
#3794 closed bug (notabug)
How can I update Sortable with dynamically appended element?
Reported by: | astray | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.7 |
Component: | ui.sortable | Version: | 1.6rc4 |
Keywords: | sortable, refresh, sortable('refresh') | Cc: | [email protected]… |
Blocked by: | Blocking: |
Description
Here's my part of the code
<!-- at document.ready event first initialize sortable --> $('#column1').sortable({placeholder:'placeholder',forcePlaceholderSize:true, handle:$('.sortable-header'), connectWith:['#column1', '#column2'], scrollSensitivity:40}); $('#column2').sortable({placeholder:'placeholder',forcePlaceholderSize:true, handle:$('.sortable-header'), connectWith:['#column1', '#column2'], scrollSensitivity:40});
<-- When button clicked --> function addItem(event){ var newItem = $('#clonable').clone(true); $(newItem).appendTo('#column2'); $('#column2').sortable('refresh'); return false; }
I'm sure this code should be clear to understand. Event handler works when I press button which says 'add new Item to sortable' and It dynamically append cloned element 'newItem' to '#column2' and I'm trying to make it also part of the sortable (That is, part of '#column').
Isn't Here's my part of the code
<!-- at document.ready event first initialize sortable --> $('#column1').sortable({placeholder:'placeholder',forcePlaceholderSize:true, handle:$('.sortable-header'), connectWith:['#column1', '#column2'], scrollSensitivity:40}); $('#column2').sortable({placeholder:'placeholder',forcePlaceholderSize:true, handle:$('.sortable-header'), connectWith:['#column1', '#column2'], scrollSensitivity:40});
<-- When button clicked --> function addItem(event){ var newItem = $('#clonable').clone(true); $(newItem).appendTo('#column2'); $('#column2').sortable('refresh'); return false; }
I'm sure this code should be clear to understand. Event handler works when I press button which says 'add new Item to sortable' and It dynamically append cloned element 'newItem' to '#column2' and I'm trying to make it also part of the sortable (That is, part of '#column').
Isn't sortable('refresh'); fits my needs? It doesn't work. I'm struggling with my widget project and got stuck with this problem. Does Anybody can help me??
Change History (2)
comment:1 Changed 14 years ago by
Milestone: | TBD → 1.6 |
---|
comment:2 Changed 14 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
That's a common user mistake. You have used a jQuery function in the 'handle option, instead of a String, so it can't auto update itself. Use handle: '.sortable-header' instead.