Refre sh значение атрибута после html () с ajax

Question

Я делаю кнопку запуска / паузы, которая работает следующим образом:

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

У меня есть кнопки запуска и остановки, хранящиеся в отдельных html файлах: work_order_start. html:

<div type="button" class="repairToggle" func="start">
  <svg>...</svg>
</div>

work_order_pause. html:

<div type="button" class="repairToggle" func="stop">
  <svg>...</svg>
</div>

Я визуализирую одну из кнопок на основе значения атрибута func:

def repair_toggle(request):
    ...
    func = request.GET.get('func')
    if func == 'stop':
        return render(request, 'mtn/work_order_start.html')
    else:
        return render(request, 'mtn/work_order_pause.html')

Проблема только в том, что работает один раз. После первого щелчка он продолжает выполнять вызов ajax, но отправляет в запросе то же старое значение func. Как я могу это исправить?

ОБНОВЛЕНИЕ:

Я понял проблему. $(btn).html(data); заменяет только элемент svg. Таким образом, func остается прежним. Если я сделаю это вместо:

<div type="button" class="repairToggle">
  <svg id='funcButton' func="stop">
</div>

Как мне получить func из svg. Я попробовал this.getElementById('funcButton').getAttribute("func");, но это не сработало.

Answer 1

Вы вставляете кнопку внутри исходной кнопки.

Измените work_order_pause. html и work_order_start. html, чтобы он содержал только svg и добавлял функцию успеха:

 if(func == "start"){
    this.setAttribute("func", "stop")
 }
 else{
    this.setAttribute("func", "start")
 }