javascript - How do I make a ajax-loaded UL sortable in a JQuery UI dialog? -

i need load ul in background , present in dialog sorting, i'm new jquery/jquery ui , having trouble google. far i've got:

$(document).on('click','a.priority', function(){     // url of link     var href = $(this).attr('href');     // tell page expect js instead     href = href + "/ajax";     // page content     $.get(href, function(data){         // initialise dialog content         var my_dialog = $('<div></div>')             .dialog({                  autoopen: false                 ,open: function (event, ui) {                     // add result of (a ul) dialog's content                     my_dialog.html(data);                     // make sortable, how?                     my_dialog.sortable().disableselection();                     // set dialog title (this dynamic later, , might need call single dialog gets remangled rather creating 1 every time)                     my_dialog.dialog("option","title","change priority");                 }             });         // show dialog         wsd_dialog.dialog('open');     });     // don't follow link     return false; }); 

this grab content (a ul of items need sorting) , present in dialog - ul appears single 'sortable' element.

how make li children of ul sortable rather ul itself?

have feeling silly question, must missing in docs.

looks you're calling sortable() on dialog. need select list items within dialog , call sortable() on those:

my_dialog.find('ul').sortable();