Обновление динамически создаваемых DIV с использованием Ajax / Django - PullRequest
Новая
       0

Обновление динамически создаваемых DIV с использованием Ajax / Django

1 голос
/ 03 апреля 2011

Я действительно старался не делать название слишком двусмысленным, но я не был вполне уверен, как еще его сформулировать (из-за того, что я такой нуб веб-разработки).

Вот сценарий, у меня есть созданный шаблон, который просматривает список объектов, каждый из которых имеет уникальный идентификатор.Давайте назовем эти объекты «часами» для примера.Я сократил код шаблона до минимума для простоты.

{% for clock in clock_list %}
    <div id="clock_{{ clock.id }}"></div>
{% endfor %}

Каждый из этих DIV должен отображать таймер / часы, уникальные для этих конкретных часов.И каждый из них должен увеличиваться каждую секунду на странице (на странице будет работать не более 10 часов).

Теперь я потратил много времени, пытаясь понять, как использовать AJAX для этого (и не стесняйтесь рассказывать мне о любых более простых / более эффективных альтернативах), но я не уверен, что понимаюкак AJAX работает правильноКак я могу быть в состоянии обновить каждый из этих динамически созданных div'ов независимо (или, по крайней мере, сделать так, чтобы все они обновлялись с одинаковой длительностью "setTimeout (function (), 1000)")

Ниже приведен код, на который я ссылалсядля AJAX: 

<script type="text/javascript">
function Ajax(){

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            document.getElementById('element_id').innerHTML=xmlHttp.responseText;
            setTimeout('Ajax()',1000);
        }
    }
xmlHttp.open("GET","content.html",true);
xmlHttp.send(null);
}

window.onload=function(){
setTimeout('Ajax()',1000);
}

Я предполагаю, что идея заключается в том, чтобы использовать "clock _ {{Vice.id}}" для "document.getElementById ('element_id').innerHTML = xmlHttp.responstText; "часть, но как я могу использовать шаблон django для циклов, чтобы перемещаться и получать содержимое файла" clock.html ", который содержит содержимое div.

Если кто-нибудьжелающим помочь и нуждающимся в более подробной информации, пожалуйста, скажите об этом. Пока я буду продолжать программирование bumpercar до тех пор, пока у меня не будет что-то для этого показать:).

1 Ответ

1 голос
/ 03 апреля 2011

То есть, вы хотите, чтобы отметка таймера отображалась для каждого элемента, который вы помещаете на страницу?Прежде всего, я предлагаю вам использовать jQuery, который сделает вашу жизнь намного проще.

Я недавно сделал нечто подобное.В моем случае мне понадобился селектор для выбора div на странице вместе с датой javascript, которую я построил, где тикер тикал до.Затем я вставил фрагмент javascript с каждым div (вы можете загрузить его динамически через AJAX), например: 

<html>
  <head>
    <script type="text/javascript">
      var timers = [];

      // can update data by calling $.ajax or $.get or any of the ajax jquery calls
    </script>
  </head>
  <body>
    {% for clock in clock_list %}
    <div class="countdown-target" id="countdown-target-{{ clock.id }}">
    </div>
    <script type="text/javascript">
      timers.push({ selector: '#countdown-target-{{ clock.id }}', endTime: new Date(year, month-1, day, hour, minute, second) });
    </script>
    {% endfor %}

  <script type="text/javascript">
    function timerTick() {
      for(var i in timers) {
        var entry = timers[i];
        var now = new Date();
        var diff = now - entry.endTime;

        var targetElement = $(entry.selector);
        var countdownTicker = $('.countdown', targetElement);

        // calculate the difference and update the ticker
        countdownTicker.text(new_ticker_text_value);
      }
    }
    // start one tick right away
    timerTick();
    setInterval(timerTick, 1000);
  </script>
  </body>
</html>

Вызов веб-службы для возврата новых данных, которые передаются в массив таймеров, будет работать нормально.

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

Нет похожих вопросов

...