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: 533

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

Related posts about jquery-ajax

Related posts about jquery-ui-sortable