jquery Ajax sortable list stops being sortable when Ajax call updates the list html
Posted
by Trevor
on Stack Overflow
See other posts from Stack Overflow
or by Trevor
Published on 2010-05-11T00:30:22Z
Indexed on
2010/05/11
0:34 UTC
Read the original article
Hit count: 529
Hi,
I am using jquery 1.4.2 and trying to achieve the following:
1 - function call that sends a value to a php page to add/remove an item
2 - returns html list of the items
3 - list should still be sortable
4 - save (serialise list) onclick
My full WIP is located here [http://www.chittak.co.uk/test4/index_nw3.php][1]
I tried to delegate from the level above the UL but I could get this to work
$("#construnctionstage").delegate('ul li', 'click', function(){
The initial list is sortable, when you click add/remove the ajax function returns a new list with the a number of items, BUT I am doing something wrong as the alert message continues to work while the list is no longer sortable.
$(document).ready(function(){
$('ul').delegate('li', 'click', function(){
alert('You clicked on an li element!');
/*$("#test-list").sortable({
handle : '.handle',
update : function () {
var order = $('#test-list').sortable('serialize');
$("#info").load("process-sortable.php?"+order);
}
});*/
}).sortable({
handle : '.handle',
update : function () {
var order = $('#test-list').sortable('serialize');
$("#info").load("process-sortable.php?"+order);
}
});
});
<div id="construnctionstage">
<ul id="test-list">
<li id="listItem_1">
© Stack Overflow or respective owner