Issue with draggable on Ajax populated listview
Hi,
I am new to jquery. I have two listviews Populated by some hardcoded values. Now I can use drag and drop from one listview to another properly. Now I have the issue when I populate my draggable listview through ajax call. i give an ajax call to my controller and get the data and populate the draggable. Now the items are not more draggable. I am not able to drag then. Not sure whyt. Please help me in this case. Below is my code
<ul id="drag" style="text-align:left;">
<li id="list_4">List item 4</li>
<li id="list_5">List item 5</li>
<li id="list_6">List item 6</li>
</ul>
<ul id="droppable">
<li id="list_1">List item 1</li>
<li id="list_2">List item 2</li>
<li id="list_3">List item 3</li>
</ul>
$(document).ready(function () {
$('#drag li').draggable({
helper: 'clone'
});
$('#droppable li').droppable({
accept: '#drag li',
drop: function (ev, ui) {
$("#droppable").append(ui.draggable);
} // end drop function
}); // end droppable
});
This code works perfectly. Now when I use below ajax call to populate my draggable
url = '/Admin/GetTestTeamsByGroupID?groupID=' + TestGroupID;
$.ajax({
url: url,
type: "POST",
datatype: "JSON",
traditional: true,
success: function (data) {
debugger;
for (i=0;i<data.length;i++)
{
$('#drag').append($('<li id='+data[i].TestGroupID+'>'+data[i].TestTeamName+'</li>'));
}
}
});
Now the items that are valready added are still draggable but the item added by this ajax call are not draggable. How I can make this draggable?
Regards,
Girish