jquery Ajax sortable list stops being sortable when Ajax call updates the list html
- by Trevor
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">