Ajax/Djangoを使用して動的に作成されたDIVを更新する

タイトルをあまりあいまいにするのを避けようとしていましたが、そのようなWeb開発のnoobの結果としてどのように表現すればよいかわかりませんでした。Ajax/Djangoを使用して動的に作成されたDIVを更新する

ここでシナリオがありますが、それぞれ固有のIDを持つオブジェクトのリストをループするテンプレートが作成されています。この例では、これらのオブジェクトを「時計」と呼んでいます。テンプレートコードを簡単にするために最小限に抑えました。

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

これらの各DIVには、その特定のクロックに固有のソートのタイマー/クロックが表示されます。そして、1秒ごとにページ上で増分する必要があります（ページでは最大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); 
}

Iが「のdocument.getElementById（ 'element_id'）は、 "クロック_ {{vice.id}}" を使用することであろうという考えを仮定しているのinnerHTML = xmlHttp.responstText。 "部分は、ループのためのdjangoのテンプレートを使用して移動し、divの内容を含む" clock.html "ファイルの内容を取得する方法

誰かが助けてくれると助かりたいと思っている人がいれば、もっと詳しく説明してください。私はそれのために何かを表示するまで、私はこのバンパカルプログラミングを続けます。

出典

2011-04-03 django_noob

これで、ページに置かれた各部門のタイマーを下げたいと思っていますか？まず第一に、jQueryを使ってライブをもっと簡単にすることをお勧めします。

私は最近同様のことをしました。私の場合は、セレクタがページ上のdivを選択する必要がありました。私は、このように、（あなたが動的にAJAXを介してこれをロードすることができます）、すべてのdivではJavaScriptのスニペットを注入された：

<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>

がうまく動作しますタイマ・アレイにプッシュし、新しいデータを返すために、Webサービスを呼び出します。

出典

2011-04-03 17:15:44 Max

お返事ありがとうございます。この行はわかりません：// $ .ajaxや$ .getやajax jquery呼び出しのいずれかを呼び出してデータを更新できます。これを行う目的は何ですか？ setInterval（timerTick、1000）はメソッドを毎秒呼び出す処理をしませんか？ countdownTicker.text（new_ticker_text_value）はdivの内容を更新しますか？申し訳ありませんすべての質問のために、私はまだ物事を一緒につなぎます。 –

申し訳ありません。そのエリアはあなたのAJAX呼び出しを行う場所とされています。 jQueryでは、$ .getJSON（url、function（response）{}）（JSONを返すと仮定して）と同じくらい簡単です。応答が得られたら、データをタイマー配列にプッシュします。また、javascriptスニペットに{{clock.id}}がありませんので、私は自分のエントリーを編集しました。 – Max

var countdownTicker = $（ '。カウントダウン'、targetElement）; var countdownTicker = $（ '。カウントダウンターゲット'、targetElement）; ？ちょっと興味があるんだけど。 –

Ajax/Djangoを使用して動的に作成されたDIVを更新する

答えて

関連する問題