#3794 closed bug (notabug)

Opened January 09, 2009 01:44PM UTC

Closed January 19, 2009 12:07PM UTC

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: astray0924@gmail.com
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??

Attachments (0)
Change History (2)

Changed January 15, 2009 02:21AM UTC by scottgonzalez comment:1

milestone: TBD → 1.6

Changed January 19, 2009 12:07PM UTC by paul comment:2

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.