Как изменить 2 отдельные части в HTML без обновления страницы с помощью Ajax в проекте Django

У меня есть HTML шаблон для проекта django, где есть 2 кнопки в верхней части страницы и одна в конце страницы. В начале страницы верхняя кнопка включена, а нижняя выключена. Моя цель состоит в том, чтобы, когда пользователь нажимает на верхнюю кнопку, она отключалась, а нижняя становилась включенной.

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

Вот основной шаблон, чтобы иметь лучшее представление:

        <!-- button -->
            <div id="startworkout">
            {% include 'my_gym/button.html' %}
            </div>
        <!-- button -->
...................................................
        <!-- button -->
            <div id="deactivate">
            {% include 'my_gym/deactivate.html' %}
            </div>
        <!-- button -->

Вот button.html:

            <form action="{% url 'my_gym:bla' id=workout.id %}" method='post'>
                {% csrf_token %}
                    {% if workout.active %}
                    <button disabled id="customSwitches" type="button">Close Workout </button>
                    {% else %}
                      <button value="true" id="customSwitches" type="button" >Start the workout </button>
                    {% endif  %}
            </form>

Вот 2-я часть deactivate.html, которую я хочу включить:

<div>
{% if workout.active %}
<button id="stop" onclick="stop();" type="button">Finish Workout</button>
</a>
{% else %}
      <button disabled id="stop" onclick="stop();" type="button">Finish Workout</button>
{% endif %}
</div>

Вот скрипт с закомментированной пробной версией:

            <script type="text/javascript">
                $(document).ready(function(event){
                    $(document).on('click','#customSwitches', function(event){
                        event.preventDefault();
                        var status= $(this).attr('value');
                        $.ajax({
                            type:'POST',
                            url:'{% url 'my_gym:bla' id=workout.id %}',
                            data:{'active' : status, 'csrfmiddlewaretoken':'{{csrf_token}}'},
                            dataType:'json',
                            success:function(response){
                                $('#startworkout').html(response['form']),
<!--                                $('#deactivate').html2(response['div'])-->
                                console.log($('#startworkout').html(response['form','div']));
<!--                                console.log($('#deactivate').html2(response['div']));-->
                            error:function(rs, e){
                                console.log(rs.responseText);
                            },
                        });
                    });
                });
            </script>

Вот мнения:

def change_status(request, id):
    if request.is_ajax() and request.method == 'POST':
       --------------------------
        if request.POST.get('active') == 'true':
            -------------
            context = {}
            html = render_to_string('my_gym/button.html', context,request=request)
            html2= render_to_string('my_gym/deactivate.html', context,request=request)
            print("Sucess")
            return JsonResponse({'form': html, 'div':html2})
        else:
            print("Fail")
    else:
        print("Fail")

В настоящее время я получаю следующую ошибку в консоли:

Uncaught TypeError: $(...).html2 is not a function

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