Sortable not working when the list comes from ajax

Sortable not working when the list comes from ajax

Hi,

I am unable to do sortable when the list is coming from Servlet layer using ajax.

My code:

$(function() {
    $( "ul.droptrue" ).sortable({
        connectWith: "ul"
    });

    $( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});

function changeSecurityConfig(securityType){
    if (typeof XMLHttpRequest != "undefined"){
    xmlHttp= new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
    xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlHttp==null){
    alert("Browser does not support XMLHTTP Request");
    return;
    } 
    
      var contextPath = '<%=request.getContextPath()%>';
 var countryName = '<%=request.getAttribute("COUNTRY_NAME")%>';

 var urlQuery = "rulesconfig.action.getTypeConfiguration.event";
 urlQuery += "?securityType=" +securityType;
 
 var uri = contextPath + "/" + countryName + "/" + urlQuery;
 
 xmlHttp.onreadystatechange = planChange;
      xmlHttp.open("GET", uri, true);
      xmlHttp.send(null);
      }


function planChange() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
$('#dragNdrop').replaceWith(xmlHttp.responseText);
 
$("ul.droptrue").sortable( 'refresh' )
     } 
}

HTML

<div id='dragNdrop' style='margin: 15px;'><div id='actual'><ul style='margin-right: 55px;' id='sortable2' class='droptrue'><li id='BodyGuards' class='ui-state-default className'>BodyGuards</li><li id='SafetyPatrol' class='ui-state-default className'>SafetyPatrol</li><li id='SecurityAgent' class='ui-state-default className'>SecurityAgent</li><li id='SecurityOfficer' class='ui-state-default className'>SecurityOfficer</li></ul></div><div id='required' class='functionality'><ul id='sortable3' class='droptrue' ><li id='Guns' class='ui-state-default className'>Guns</li><li id='SecurityGuard' class='ui-state-default className'>SecurityGuard</li></div><div><input style='float: right; margin-top: 25px; margin-right: 115px; ' onclick='saveFunction()' type='submit' value='Submit' id='submitButton' /></div></div>

Please help me in resolving this issue.

Thanks
Suren