Refresh django table automatically when new data is available

Question

I have implemented fetch_results function in order to add new data to the database in a django website. This function is activated in every page refresh.

views.py 

def fetch_results():
# global result
documents = DRSDocument.objects.all()

for doc in documents:
    computed_image_path = os.path.join(WORKING_DIRECTORY, doc.uuid, 'process_result.jpg')

    drs_status = doc.status
    if os.path.isfile(computed_image_path):

        if drs_status == 'Q':

            doc.date_process_end = timezone.now()
            doc.status = 'F'
            doc.save()
return render('list_admin.html', {'status': drs_status})

When an image is available in the server os.path.isfile(computed_image_path) data is available in the django web page.

list_admin.html

<script>
function refresh() {
$.ajax({
url: '{% url table_monitoring %}',
success: function(data) {
var dtr = $("#container2c", data);
$('#container2c').html(dtr);
      }
  });
setTimeout("refresh()", 3000);
}

$(function(){
refresh();
});

</script>

{% endblock %}

{% block content %}
<div id="container2c" align="center">
<BR>
<BR>
    {% if drs_images %}
    <BR>
    <form method="post" action="{% url 'retinal_drs_delete_multiple' %}"     style="height: 530px;overflow-y: scroll;width: 90%;">
        {% csrf_token %}
        <table id="myTable" style="width:90%;font-style: normal;">
            <thead>
            <tr style="font-style: italic;">
                <th><div class="th-inner"><IMG title="Click to select all" width=12px src="{% static 'images/red-delete-button.png' %}" onclick="return selectAllForDeletion();"></IMG></div></th>
                <th><div class="th-inner">&nbsp;Image&nbsp;</div></th>
                <th><div class="th-inner">&nbsp;#&nbsp;</div></th>
            </tr>
            </thead>
        <tbody>

            {% include 'list_admin_table.html' %}

        </tbody>
    </table>
    <BR>
    <BR>
    <input type="submit" value="Delete selected">
    <BR>

    </form>

Here is my list_admin_table.html

list_admin_table.html

{% for document in drs_images %}
            <tr {% if document.completed %}style="color:white;    font-weight:bold;"{% else %}style="color: black;"{% endif %}>
                <td><INPUT type="checkbox" name="delete_{{    document.drs_image.uuid }}" id="id_delete_{{ document.drs_image.uuid }}"    value="true"/></td>
                <td><IMG WIDTH="22px" SRC="{% static 'images/' %}{{    document.drs_image.get_status_icon }}" title="{{ document.drs_image.get_status_display }}"> </td>
                <td>{{ forloop.counter }}</td>
            </tr>

        {% endfor %}

here is my urls.py

    urlpatterns = [
        url(r'^list/$', retinal_drs_views.list_admin, name='retinal_drs_list_admin')
        url(r'^table-monitoring/$', retinal_drs_views.fetch_results, name="table_monitoring"),
]

My objectie is to fetch the results periodically (every 10 seconds) and if it return´s true, refresh the table id="myTable" automatically.

I´ve been reading information about AJAX, Jquery, Websockets... but I´m new to django and client side programming, so i didn´t get any valid result.

Thank you!

Answer 1

I checked this answer, basically it must work for you as well here