Reloading a <div> element in Django but no refresh happening

Question

I'm adding objects to my array list from a bar code scanner. The data is added after every scan of the barcode scanner it depends on how fast the user is in scanning. To display this data I have created a page. I don't want the whole page to refresh but that specific div that should display the scanned codes.

This is what I have done so far

urls.py

  path('status', include('detect_barcodes.urls')),

views.py:

@ms_identity_web.login_required

def detect(request):
    stream = CameraStream()
    success, frame = stream.camera.read()
    if success:
        status = True
    else:
        status = False
    bar_codes = stream.used_codes
    data = (",\n".join(bar_codes))
    return render(request, 'detect_barcodes/detect.html', context={'data': data, 'cam_status': status})

template file(detect.html):(I want to auto-refresh just the div with id="container")

  <div class="main-wrap">
        <div class="container">
            {% if cam_status %}
                <img src="{% url 'camera_feed' %}" style="width: 640px; height: 480px;"/>
            {% else %}
                <h3>Camera stream status: Camera is either not accessible or busy</h3>
                <h5>Things to check:</h5>
                <ul class="text-right list-inline">
                    <li>USB connection?</li>
                    <li>Camera number in your .env file?</li>
                    <li>Camera is already in use?</li>
                </ul>
            {% endif %}
        </div>
        <div class="container" id="container">
            <form action="/submit/" method="post">
                {% csrf_token %}
                Fill the Detail:
                <br/>

                <textarea id="description" rows="17" cols="90" name="description" class="myForm">  {{ data }}
         </textarea>

                <input type="submit" value="submit"/>
            </form>
        </div>

    </div>

When I run the code and scan, no refresh is done to the div

I have tried with the js bit

<script>
        function refresh() {
            $.ajax({
                url: "{% url 'detect_barcodes' %}",
                success: function (data) {
                    $('#container').replaceWith($('#container', data)); // NOTE this
                }
            });
        }
        var seconds = 3; // seconds, edit here
        setInterval(refresh(), seconds * 1000);
    </script>

No Luck so far with refreshing the div, even if the value in the array list is changed, the value don't show. I end up reloading the whole page manually for the data to appear.

Answer 1

This code won't work as your django code is interfacing with scanner and the stream will open only at time of request which will be ms and you will never catch it. Then when the refresh comes there is nothing linking the request with the previously scanned values.

You need to think about another alternative

PS Django is a Web framework always consider that the user is using another device miles away.