Замените элемент div на html ()

Question

У меня проблема с заменой элемента div на ajax. Идея - кнопка старт / стоп. На странице есть список из card элементов, каждый со своей кнопкой. Обе кнопки хранятся в отдельных файлах html.

work_order_start. html:

<div type="button" class="repairToggle" order_id="{{ order.id }}" func="start">
  <svg>...</svg>
</div>

work_order_pause. html:

<div type="button" class="repairToggle" order_id="{{ order.id }}" func="stop">
  <svg>...</svg>
</div>

Изначально только одна отображается на странице на основе условия if:

{% if order.status == 'DN' %}
  {% include 'mtn/work_order_pause.html' %}
{% else %}
  {% include 'mtn/work_order_start.html' %}
{% endif %}

Вот мой сценарий:

    var btns = document.querySelectorAll(".repairToggle");
    for (i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", manageOrderStatus);
    }
    function manageOrderStatus() {
      var order_id = this.getAttribute("order_id");
      var func = this.getAttribute("func");
      if(func == 'start'){
        var endpoint = "{% url 'ajax_start_order' %}";
      } else {
        var endpoint = "{% url 'ajax_stop_order' %}";
      }
      $.ajax({
        url: endpoint,
        type: "GET",
        data: {
          'order_id': order_id,
        },
        success: function (data) {
          $(this).html(data);
        }
      });
    }

и мои представления:

def start_repair(request):
    ...
    return render(request, 'mtn/work_order_pause.html')

def end_repair(request):
    ...
    return render(request, 'mtn/work_order_start.html')

Представление выполняется правильно, но $(this).html(data); не заменяет один div другим. Что я делаю не так?

Answer 1

$ (это) относится к ajax контексту. Вам нужно сохранить $ (this) в одной переменной вне вызова ajax. Вероятно, это решит вашу проблему. Без полного кода разобраться не смог. Проверьте, работает ли это