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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -