Как htmx может получить доступ к данным из события?

У меня есть вид

def tag_delete(request):
    if request.method == 'POST':
        tag_name = request.POST.get("tag")
        tag = Tag.objects.get(name=tag_name)
        tag.delete()

        response = HttpResponse(status=204, headers={'HX-Trigger': json.dumps({
                "taglistchangeddelete": {"tag": tag_name}
            })})
                  
        return response

Когда пользователь нажимает кнопку для удаления тега, вызывается это представление. Это представление работает нормально. Но проблема начинается с того, что у меня есть переменная сессии, которая содержит список выбранных тегов. Если удаляемый тег находится в этом списке, он должен быть удален оттуда. Поэтому я создал еще одно представление для обработки этого удаления:

def process_tags_deleted(request, tag):   

    selected_tags = request.session['selected_tags']    
    if tag in selected_tags:
        selected_tags.remove(tag)

    request.session['selected_tags'] = selected_tags
    
    #The rendered template will show the user their selected tags 
    response = render(request, 'espace/tags_selected.html', {
             'selected_tags': selected_tags,
          })  

    return response

Для вызова функции process_tag_deleted я создал HTMX-запрос get внутри произвольного div в шаблоне:

<div hx-get={% url 'process_tags_deleted' %}
         hx-vals='{"tag": evt.detail.tag}'
         hx-target="#tags_selected"
         hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
         hx-trigger="taglistchangeddelete">
    </div>

Я почти уверен, что проблема кроется в hx-vals. Я не могу получить значение 'tag', которое приходит из события "taglistchangeddelete". Оно выдает в консоли синтаксическую ошибку HTMX:

htmx:syntax:error
b @ htmx.min.js:1
function b(e) {
      if (console.error) {
        console.error(e) #ERROR
      } else if (console.log) {
        console.log("ERROR: ", e)
      }
    }

Что означает эта ошибка? И как решить мою задачу? Большое спасибо!!!

Перестройте HttpResponse в tag_delete:

def tag_delete(request):
    ... 
    response = HttpResponse(status=204)
    response["Hx-Trigger"] = json.dumps({"taglistchangeddelete": tag_name})
    return response

Затем вы получаете доступ к ответу:

<div hx-get="{% url 'process_tags_deleted' %}" 
     hx-vals='js:{"tag": event.detail.value}'
     hx-target="#tags_selected"
     hx-trigger="taglistchangeddelete from:body">
</div>

Нота

Запросы

GET не нуждаются в csrf_token.

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