Как сделать элементы, которые генерируются после загрузки страницы (ajax), становятся перетаскиваемыми? - PullRequest
Новая
       32

Как сделать элементы, которые генерируются после загрузки страницы (ajax), становятся перетаскиваемыми?

1 голос
/ 02 сентября 2011

У меня есть div на моей странице, который заполняется через вызов ajax для разделения php-скрипта каждые 2000 мс.Когда пользователь устанавливает флажок, интервал обновления останавливается, и все элементы в div должны стать перетаскиваемыми.Если я делаю это без интервала обновления, это работает, но как только у меня есть div, перезагружающий элементы теряют свою перетаскиваемость.Как мне сохранить их перетаскиваемое свойство? 

<SCRIPT LANGUAGE="JavaScript">
    $(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="+<?php echo $sid; ?>,true);
        xmlhttp.send(); 

    }

    function onEditMode(cb) {
      if(cb.checked) { 
        editMode = true; 
        $('.item').draggable( 'enable' );
        window.clearInterval(intervalId);
      }
      else { 
        editMode = false;
        $('.item').draggable( 'disable' );
        intervalId = window.setInterval(getScreen ,2000); 
      }  
    }

    </SCRIPT>
  </head>
  <body>

    <div id="content">      
      <div class="post">            
         <div id="refresh">
         </div>     
      </div>        
    </div>

1 Ответ

1 голос
/ 02 сентября 2011

Вы должны сделать элементы перетаскиваемыми / не перетаскиваемыми в обратном вызове Ajax после перезаписи HTML-кода контейнера. Поскольку после перезаписи HTML все подключенные слушатели DOM теряются. 

var refresh = $('#refresh');
refresh.html(xmlhttp.responseText);
$('.item', refresh).draggable('enable');

И да, как сказал @pduersteler, jQuery имеет отличные возможности Ajax. load() метод делает именно то, что вы делаете - загружает HTML в контейнер. $.post() - это путь.

Кроме того, вам лучше заменить setInterval на setTimeout внутри обратного вызова Ajax . Это обеспечит более гладкое обновление. 

var postData = { sid: <?=sid?> };

var container = $('#refresh');

var ajaxCallback = function (data) {
    container.html(data);

    var items = $('.item', container);

    if (editMode) {
        items.draggable('enable');
    } else {
        items.draggable('disable');
        setTimeout(getScreen, 2000);
    }
};

function getScreen() {
    $.post('/getScreen.php', postData, ajaxCallback);
}

getScreen();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...