Opened 11 years ago

Closed 11 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: astray0924@…
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 11 years ago by Scott González

Milestone: TBD1.6

comment:2 Changed 11 years ago by paul

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.