Ajax,JavaScipt with Django, update data on page. Please help.

Using Django Templates & Frontend
1

Greetings.

I want to make an asynchronous update of the data on the page. There is a table that loads data from the database. Outputs via Django template engine, data in the table is added/updated from the side.

And so that I can see them in the table, I need to refresh the page itself. But I need the table to be updated without updating the page itself. I reviewed a lot of options and examples on the Internet, but I did not understand. There are no simple examples.

Please help, I think many people are interested in this question :slight_smile:

view.py

def test(request):
    
    last_3 = New_tables.objects.filter(active=0).order_by('-id')[:3]
    last_new_table = reversed(last_3) 
       
    return render(request, 'main/test.html', {"last_new_table":last_new_table})

test.html

That’s how I tried to output via Javascript, but unfortunately it doesn’t work either. Updates the data on the page only after the page is refreshed…

{% extends 'main/base.html' %} {%block content%} {% load static %}

<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-hover table-dark">

  <thead>
    
    <tr>
      <th class="text-white-50 bg-dark" style="font-size: 0.9em;" scope="col">Table</th>
      <th class="text-white-50 bg-dark text-center " style="font-size: 0.9em;" scope="col">N</th>
      <th class="text-white-50 bg-dark text-center " style="font-size: 0.9em;" scope="col">Type</th>
      <th class="text-white-50 bg-dark text-center " style="font-size: 0.9em;" scope="col">Quote</th>
      <th class="text-white-50 bg-dark text-center " style="font-size: 0.9em;" scope="col">Start</th>
    </tr>
  </thead>

  <tbody class="tbody">

  </tbody>

</table>

  <script>

    function index() {
     
     $('.tbody').empty()
      {% for kl in last_new_table %}
      
        $(`
          <tr>
    
            <th class="text-white-50 bg-dark" scope="row">TBL000${"{{kl.id}}"}</th>
            <td class="text-warning bg-dark">${"{{kl.n}}"}</td>
            <td class="text-info bg-dark text-center">${"{{kl.instrument}}"}</td>
            <td class="text-info bg-dark text-center"><img src='{% static "down.png" %}' width="20%" height="15%"></td>
            <td class="text-center" style="font-size: 0.9em;">....</td>
    
          </tr>
          `
          
          ).appendTo('.tbody')
         
      {% endfor %}
      
    }
    setInterval(index, 200)
  
  </script>


{%endblock content%}

how to make the data automatically loaded into the table?

2

Nor are there any simple solutions.

If you’re looking for a solution where the browser initiates the table being updated, you can do it using AJAX.

But if you want the server to initiate an update of a page, you need to implement websockets. In the world of Django, that generally means Channels.

In either case, this sort of situation is one (of many) cases where HTMX can be a prime candidate for tooling.

2 Likes
3

HTMX is good if you want to use HTML. If you want to interact with data (e.g., json) from your server, you could use Alpine.js.

If case helpful for you, here’s a simple guide that I wrote about adding async forms to Django templates: https://www.photondesigner.com/articles/create-django-form-with-alpine-js

1 Like
4

I think the best solution for that is done by data table , You can use the nex simple line of code

let myTable = $('#your_table_id').DataTable(); 
myTable.ajax.reload();

But you must initialize your table with ajax

And this is some helpful links