jQuery UI Draggable only work after ajax call -
i have easy problem jquery draggable ui. typed function name inid_drag , when after ajax call working good. when type before ajax call it's not working.
follow codes draggable:
function init_drag(){ $("#lessonteacher li").draggable({ helper: 'clone' }); }
follow codes working correctly:
$("#classid").change(function(){ var classid = $(this).val(); $.ajax({ async: false, type: "post", datatype: "json", data:"classid=" + classid, url: "views/timetablesajax.php", success:function(data){ $("#lessonteacher").html(""); $("#timetable").hide(); $("#timetable").show("slow"); $("#timetable td").not(".notdrop").html(""); $.each(data,function(i,persons){ $("#lessonteacher").append("<b>" + persons[0].code + "</b><br/>"); for(var = 0; < persons.length; i++){ $("#lessonteacher").append("<li class='token-input-token-facebook' style='list-style-type: none;'>" + "<p style='padding-left: 10%;' data-id=" + persons[i].id + ">" + persons[i].staff + "</p>" + "<span class='infobox' style='background-color: #808080;'><img src='bt/upload/info.ico' width=10 height=10></span></li><br/><br/>"); } }); // in function has got draggable codes. init_drag(); } }); });
follow codes not working:
$("#classid").change(function(){ var classid = $(this).val(); // in function has got draggable codes. init_drag(); $.ajax({ async: false, type: "post", datatype: "json", data:"classid=" + classid, url: "views/timetablesajax.php", success:function(data){ $("#lessonteacher").html(""); $("#timetable").hide(); $("#timetable").show("slow"); $("#timetable td").not(".notdrop").html(""); $.each(data,function(i,persons){ $("#lessonteacher").append("<b>" + persons[0].code + "</b><br/>"); for(var = 0; < persons.length; i++){ $("#lessonteacher").append("<li class='token-input-token-facebook' style='list-style-type: none;'>" + "<p style='padding-left: 10%;' data-id=" + persons[i].id + ">" + persons[i].staff + "</p>" + "<span class='infobox' style='background-color: #808080;'><img src='bt/upload/info.ico' width=10 height=10></span></li><br/><br/>"); } }); } }); });
when call $("#classid").change(function(){}
execute
init_drag();
and ajax method same time in responce ajax take more time init_drag() method when got reply ajax html or dragging function overlapping ur html because append html.
Comments
Post a Comment