Адаптация отображения страницы вместе с результатом jQuery

У меня есть проект Django, который выполняет задачу, а затем отображает страницу, на которой я хочу отображать различные вещи в зависимости от состояния задачи.

Чтобы показать пример того, что я хочу, у меня есть три div, каждый из которых отображается для определенного состояния задачи :

<div id="SUCCESS"> 
    <!-- What I want to display when the execution of my task succeeded -->
</div>

<div id="FAILURE">
    <!-- What I want to display when the execution of my task failed -->
</div>

<div id="EXECUTING"> 
    <!-- What I want to display when my task is still executing -->  
</div>

Я наконец нашел способ сделать это, добавив style="display:none" на div для состояния успеха и неудачи, и обновляет отображение div'ов, когда состояние задачи меняется.

Например, сначала будет отображаться только div с id="EXECUTING", а затем, когда состояние задачи изменится на 'failed', у div с id="EXECUTING" атрибут display будет изменен на display:none, а у div с id="FAILURE" - на display:""

Код для выполнения этого действия следующий :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        let task_id = '{{ task_id }}'
        updateState(task_id)

        function updateState(task_id) {
            $.ajax({
                url: "{% url 'scripts:task_status' task_id %}",
                type: 'GET'
            })
            .done(response => {
                 if(response.state == "FAILURE" || response.state == "SUCCESS"){
                     document.getElementById("EXECUTING").style.display = "none"
                     document.getElementById(response.state).style.display = ""
                     return 
                 }

                 else{
                     // rerun every 100 milliseconds
                     setTimeout(function() {
                         updateState(response.task_id)
                     }, 100)
                 }
            })
        }
    })
</script>

А представление, из которого берется task_status, следующее :

def task_status(request, task_id):
    task = AsyncResult(task_id)
    response = {
        'task_id': task_id,
        'state': task.state,
        'info': str(task.info),
    }
    return JsonResponse(response, status=200)

Я хочу знать, есть ли другой способ изменить то, что отображается на странице, не используя этот трюк с изменением атрибута display моих div'ов ?

Это мой первый опыт использования jQuery и js, так что, возможно, я чего-то не понимаю, поэтому и спрашиваю об этом.

Спасибо за помощь

Вернуться на верх