Django: how to refresh html content on new database entry

178 Views Asked by At

I am developing a MQTT Dashboard app with django. I have a mqtt thread running in background, periodically polling for data from remote device and saving it as a database (MariaDB) row. I also have a view that displays this row in simple table. Now, what I want to do is to refresh this view (without page reload) when new data appears and my question is how to do that. I thought of two different approaches:

  1. Use JS's setInterval triggering ajax call to periodically refresh content. Problem here is that I'm not really proficient with JavaScript nor jQuery so I would love to get simple example how to do that
  2. Somehow refresh data from within on_message function which is called when mqtt gets new data. Problem here is that I have no clue if it is even possible

I would appreciate any explanation of above or even more some description of different, more proper way to do that. Here is my code:

part of template with content i want to refresh:

<div class="row mb-4 justify-content-center text-center">
    <h1 class="text-uppercase text-white font-weight-bold">{% translate "Parameters" %}</h1>
    <table id="device-parameters-table">
        <thead>
            <tr>
                <th scope="col">{% translate "Parameter" %}</th>
                <th scope="col">{% translate "Value" %}</th>
                <th scope="col">{% translate "Unit" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for key, value in latest_read_data.items %}
            <tr>
                <td>{{key}}</td>
                <td>{{value.value}}</td>
                <td>{{value.unit}}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

device view:

def device(request):
    clicked = request.GET.get('device_id')
    dev = Device.objects.get(id=clicked)

    latest_read_data = ReadData.objects.filter(device=dev).order_by('timestamp')

    if latest_read_data:
        read_data = latest_read_data.values()
        read_data = read_data[len(read_data)-1]
        read_data.pop('id')
        read_data.pop('device_id')
        read_data.pop('timestamp')
        parameters_get_units(read_data)
        context = {'latest_read_data': read_data, 'device': dev}
        return render(request, 'dashboard/device.html', context=context)
    else:
        return HttpResponseRedirect('/dashboard')
0

There are 0 best solutions below