Django template data update using ajax

Question

I am trying to update my data periodically (10 seconds) on a Django template using ajax scripts. I am relatively new in front-end development.

Using other articles, I am able to do so. But everytime page refreshes, multiple threads for page refreshing are created and update requests are doubled every 10 secods.

Following is my django template snippet:

<body id="page-top">
 <div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr class="table-info">
        <th style="text-align:center">Parameter</th>
        <th style="text-align:center">A</th>
        <th style="text-align:center">B</th>
      </tr>
    </thead>
      <tbody>
      {% for para, details in manualData.items %}
      <tr>
         <th style="text-align:center" scope="row">{{ details.1.name }}</th>
           {% for key, entity in details.items %}
        <td style="text-align:center">
                <font color="white" size="4px">{{ entity.value }}</font>
            </td>
           {% endfor %}
          </tr>     
      {% endfor %}
      </tbody>
  </table>
 </div>
</body>

I am using ajax script as follows:

<script type="text/javascript">
        function refresh() {
         var_ref =  $.ajax({
                success: function (data) {
                    $('#page-top').html(data);
                }
            });
        }
        $(function () {
            setInterval('refresh()', 10000);
        });
    </script>

Conclusively, all I need is:

once the refreshing process is called, new process should not be created, or else past process to be aborted if new process is to be defined.

Kindly help me to attain the same.

Thanks in advance

Nakul

What does your view look like, and what do you have in "data" ? — bruno desthuilliers, Apr 22 '20 at 10:13
Well, `id="page-top"` is the whole `body`... Perhaps you need to request from backend or rewrite on frontend something more specific, e.g. global `div` inside body while keeping script outside of this div. Also you might prefer to start your timer on `$( document ).ready()`; — Ivan Starostin, Apr 22 '20 at 10:44
Does this answer your question? [Refresh page periodically using jquery, ajax and django](https://stackoverflow.com/questions/22906593/refresh-page-periodically-using-jquery-ajax-and-django) — Yunnosch, Jul 06 '20 at 05:53

score 0 · Answer 1 · answered Apr 23 '20 at 01:20

You need your ajax call to be synchronomous instead of async, this way you will block the thread until you get the data you require

Can be done by adding the corresponding attribute on the ajax call

When within the industry you would normally use the template system to load something like react, angular or vue which constantly update the DOM without having to make endless polling

score 0 · Answer 2 · answered Jul 27 '20 at 06:09

Thanks to the answer at post: Refresh page periodically using jquery, ajax and django.

Also, Thank you @Mr-Programs for your suggestion regarding async attribute.

I have got a suitable answer for my query and updated the javascript as follows.

<script>
         function worker(){
         var url =  'yoururl';
         $.ajax({
          type:'get',
          url: url,
          async: false,
          success: function(data) {
          var dtr = $('.page-top',data); 
          # not necessarily body div, can use any section required to be updated
          $('.page-top').html(dtr);
                complete: function() {
                setTimeout(worker, 10000);
               }
          });
         }
         $(document).ready(function(){
         setTimeout(worker, 10000);
         });

         };
        </script>

Django template data update using ajax

2 Answers2