javascript - How do I make elements that are generated after page load (ajax) become draggable? -


I have a page that, through an AJAX call, different php scripts are populated in every 2000ms. When the user checks a checkbox, the update interval stops and all items in the div are required to be dragged. If I do this without the update interval, but once I loose the items to load the div again, how can I make their draggable assets loose?

  & lt; SCRIPT LANGUAGE = "JavaScript" & gt; $ (Window) .load (function () {getScreen ();}); Var editMode = false; Var intervalid = window.setInterval (getScreen, 2000); Function getScreen () {if (window.XMLHttpRequest) {// code for IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest (); } Else {// code for IE6, IE5 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); } Xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 & xmlhttp.status == 200} {document.getElementById ("Refresh"). InnerHTML = xmlhttp.responseText;}} Xmlhttp.open ( "POST", "getScreen.php? Sid =" + & lt ;? php echo $ sid;; & gt ;, true); xmlhttp.send ();} function on edit mode (CB) {if (cb. Checked) {editMode = true; $ ('item') Dragable ('enabled'); window.clearInterval (intervalId);} and {editMode = false; $ ('. Item') Dragable ('disabled '); IntervalID = window.SetInterver (Milltex, 2000);}}   gt; body & gt; & lt; div id = "content" & gt; Gt; & lt; div class = "post" & gt; div id = "refresh" & gt; & lt; / div & gt; & lt; / div & gt; Lt; / div>    

After you overwrite you in Ajax Callback Should make the item dragable / non-dragable Container HTML Once the HTML is overwritten, any attached domain listeners are lost.

  var refresh = $ ('# refresh'); Refresh.html (xmlhttp.responseText); $ ('. Item', refresh) Drug ('Enabled');   

And yes, as Peeders Starlar said, there are excellent Ajax features in jQuery the method does exactly what you do ??? Loads HTML in a container.

In addition, you will ensure setInterval inside setTimeout > Ajax callback this smooth update experience .

  var postData = {sid: & lt ;? = Sid? & Gt; }; Var container = $ ('# refresh'); Var ajax callback = function (data) {container.html (data); Var item = $ ('. Item', container); If (editMode) {items.draggable ('enabled'); } And {items.draggable ('disabled'); SetTimeout (getScreen, 2000); }}; Function getScreen () {$ .post ('/ getScreen.php', PostData, Ajax Callback); } GetScreen ();    

Comments

Popular posts from this blog

mysql - BLOB/TEXT column 'value' used in key specification without a key length -

c# - Using Vici cool Storage with monodroid -

python - referencing a variable in another function? -