jquery sortable not functioning when ajax loaded

Question

I have this code running if loaded static.

HTML

<div class="control-group" id="example-2-1">
    <div class="span3">
        <ul class="sortable-list">
        </ul>
    </div>
</div>

JQUERY

// Example 2.1: Get items
$('#example-2-1 .sortable-list').sortable({
    connectWith: '#example-2-1 .sortable-list',

    receive: function(event, ui) {
        // so if > 10
        if ($(this).children().length > 1) {
            //ui.sender: will cancel the change.
            //Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
        }
    }                   
});

But when I run it with AJAX, the sortable doesnt work anymore.

AJAX / REMOTE DATA

jQuery.ajax({
    type: "POST",
    url: "index.php/data/get_data/",
    success:function(response){                     

            $('#example-2-1').append ($(response).hide().fadeIn('1000000'));                                                    
    },

    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

what did I miss?

Answer 1

Just after binding the dynamic sortable call below function

 $('#nestable3').nestable();

Answer 2

I hope you have following code under your response:

  <div class="span3">
    <ul class="sortable-list">
    </ul>
  </div>

If so ; try using following code to again refresh it.

 $( "#example-2-1 .sortable-list" ).sortable( "refresh" ); 

like below:

  jQuery.ajax({
type: "POST",
url: "index.php/data/get_data/",
success:function(response){                     

        $('#example-2-1').append ($(response).hide().fadeIn('1000000'));     
        // refresh sorting here.
        $( "#example-2-1 .sortable-list" ).sortable( "refresh" );                                                
},

error:function (xhr, ajaxOptions, thrownError){
    alert(thrownError);
}

});

Answer 3

Try calling .sortable after you append content to your div.