jQuery sortable and AJAX question. (sortable not working when the list comes from AJAX)

Question

I have 2 sortable lists. The first one is getting the elements with AJAX from database (like pagination, I do not want 200 item at once on that list). The second one is empty at first and I want to fill it with elements from the first.

I'm very new to jQuery and AJAX so I want to apologize in advance for any stupid thing that I will say.

Sortable is not working on the first list when I get elements with AJAX.

This is what I use for sortable:

    jQuery(document).ready(function(){
      jQuery("#sortable1, #sortable2").sortable({
      cursor:'crosshair',
      connectWith: '.connectedSortable'
     }).disableSelection()
     });

This is the AJAX part:

jQuery('.nav').click(function(event) { 
     jQuery.ajax({
      type: "post",url: "admin-ajax.php",
      data: { action: 'ak_attach', 'lim': jQuery(event.target).attr("name"),_ajax_nonce: '' },
      beforeSend: function() {jQuery("#loading").fadeIn('fast');},
      success: function(msg){
      jQuery(".listContent").html(msg)

      }
     }); //close jQuery.ajax
     return false;
    })
})

regards, bo

Answer 1

Are you calling $("#sortable1, #sortable2").sortable( 'refresh' ) after you add the new values to the list? This will cause jquery to see the new values and resort if needed.

http://jqueryui.com/demos/sortable/#method-refresh