Как 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
.