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