JQuery Live and Sortable

Question

I am trying to implement drag and drop so I can sort lists of data and update the database with the relevant positions.

I have a working example but when I try to use the same code on lists that are brought in via ajax the event is binding but none of its methods are triggered and the items do not stay swapped, (They swap back when you let go of the mouse)

here is my html

<ul class='sortable'>
    <li>
        <ul>
            <li>Data</li>
            <li>Data2</li>
        </ul>
   </li>
   <li>
        <ul>
            <li>Data3</li>
            <li>Data4</li>
        </ul>
   </li>
</ul>

and then my JavaScript looks like this. I only want the internal UL's to be swapped. Ie the lists containing the li Data2 etc.

$(document).ready(function()
{
    //$(".sortable").disableSelection();
    $(".sortable").live("dblclick", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

Using an event like double click or click was the only way I could get the event to bind at all. Using sortable did not work.

Here is the code I have used to tried to bind the element as well as the sample above

$(document).ready(function()
{
    $(".sortable").live("sortable", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

I also tried the above code without the .live() wrapped around but that did not work either.

Here is the code that loads the list from the server,

$(".myLink").live("click", function()
{
    var id   = $(this).attr("id");
    var url = base_url + "admin/controller/function/" + id;

    showList(url);

    return false;
});


//loads data into the form div
function showList(url)
{
    var arr = new Array();
    $.post(url, arr, function(data)
    {
        $("#form").html(data);

    }, "text");
}

Any suggestions or pointers in the right direction would help.

Thanks

Answer 1

[update]

Change your AJAX callback line from $("#form").html(data); to this:

$("#form").html(data).find('.sortable').sortable(originalOptions);

And change your original sortable() command (which I am assuming is elsewhere) to something like this:

var originalOptions = { update: function(){ alert('click');}  };
$(".sortable").sortable( originalOptions );

The important thing is making sure originalOptions is available for use in your showList function.

[original answer]

You just need to use refresh when the list is updated. So lets say you have this $.post code:

$.post('/url', { new_positions: whatever }, function(data){
  // data = a bunch of 'lis' but no 'ul'
  $('.sortable').html(data).sortable('refresh');
}, 'html');

This changes out the old li items for the new ones, and the refresh should rebind and accept the new items.

Answer 2

Ok I have managed to fix it and I am unsure why this would stop it working but it definitely is the problem. The List I was trying to sort had a float left in the style sheet on it for displaying the list horizontally. Once I removed this style the update event was then triggered.

I now just use display:inline to to style the list horizontally. I hope this helps somebody because it's took my hours to work it out.

Thanks for the help. Ben