Search and Top Navigation
#2977 closed bug (notabug)
Opened June 09, 2008 11:30AM UTC
Closed June 16, 2008 09:09PM UTC
Sortable: dynamically created sortables do not catch events
Reported by: | jstayton | Owned by: | paul |
---|---|---|---|
Priority: | major | Milestone: | 1.5 |
Component: | ui.sortable | Version: | 1.5rc1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Example: http://www.justinstayton.com/sortableTest.html
Move 'Latest Pages' to the empty sortable at the bottom, which dynamically adds a new empty ul to the bottom. As you can see, the new ul looks like it's recognized as a sortable due to the class="ui-sortable" that is added. Items can also be dropped in this new ul; however, no 'update' or 'receive' is fired, and items added to the new ul cannot be moved back to any of the other connected lists.
I'm not sure if this is supposed to work and it's a bug, or if I'm just not doing things correctly with sortable('refresh'), or if this wasn't a planned feature and only partially works by accident... but I can definitely see the usefulness in having said ability, and I'm looking forward to using it. Let me know what you think. Thanks, Paul!
$('#recentActivity > ul').sortable( { connectWith: ['#recentActivity > ul'], opacity: 0.7, receive: function(e, ui) { alert('received'); }, update: function(e, ui) { if (ui.element.attr('id') == 'newRow') { ui.element.attr('id', 'row' + (ui.element.siblings('ul').length + 1)); ui.element.after('<ul id="newRow" style="width: 600px; height: 100px; border: 1px solid #000000;"></ul>'); $('#recentActivity > ul').sortable('refresh'); } console.log(ui.element.attr('id')); console.log(ui.element.sortable('toArray')); } } ); });
Attachments (0)
Change History (1)
Changed June 16, 2008 09:09PM UTC by comment:1
resolution: | → invalid |
---|---|
status: | new → closed |
Hey there, the issue you have here is that the "refresh" function will only refresh sortables that are alrdy initialized as sortables - however, that won't help here, because your newly created sortable is not yet sortable.
Easy fix:
Replace the $('#recentActivity > ul').sortable('refresh'); with a new initialization, meaning $('#recentActivity > ul').sortable({ connectWith: ['#recentActivity > ul'] });
This will leave all other sortables, and just init the ones that are new - helped in my test case :)