fix: use hx-swap=innerHTML so #photo-gallery id survives HTMX swaps

This commit is contained in:
Stephan Kerkman 2026-05-30 21:36:54 +02:00
parent be9d6caf94
commit 1a9aa24ebf

View file

@ -13,7 +13,7 @@
{% if not photo.is_thumbnail %}
<form method="post" action="{% url 'set_thumbnail' photo.pk %}"
hx-post="{% url 'set_thumbnail' photo.pk %}"
hx-target="#photo-gallery" hx-swap="outerHTML">
hx-target="#photo-gallery" hx-swap="innerHTML">
{% csrf_token %}
<button type="submit" class="btn btn-outline-success btn-sm py-0 px-1" style="font-size:.7rem;" title="Set as thumbnail"></button>
</form>
@ -22,7 +22,7 @@
{% endif %}
<form method="post" action="{% url 'delete_photo' photo.pk %}"
hx-post="{% url 'delete_photo' photo.pk %}"
hx-target="#photo-gallery" hx-swap="outerHTML">
hx-target="#photo-gallery" hx-swap="innerHTML">
{% csrf_token %}
<button type="submit" class="btn btn-outline-danger btn-sm py-0 px-1" style="font-size:.7rem;" title="Delete"></button>
</form>
@ -34,7 +34,7 @@
{% endwith %}
<form method="post" action="{% url 'upload_photo' plant.pk %}" enctype="multipart/form-data"
hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="outerHTML"
hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="innerHTML"
hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner">
{% csrf_token %}
<div class="d-flex gap-2 align-items-center flex-wrap">
@ -45,15 +45,3 @@
</div>
</form>
</div>
{% if request.htmx %}
<div id="plant-hero-container" hx-swap-oob="true">
{% if plant.species and plant.species.api_image_url %}
<img src="{{ plant.species.api_image_url }}" class="plant-hero rounded mb-3" alt="{{ plant.species.common_name }}">
{% elif plant.thumbnail_url %}
<img src="{{ plant.thumbnail_url }}" class="plant-hero rounded mb-3" alt="{{ plant.name }}">
{% else %}
<div class="plant-hero-placeholder rounded mb-3">🌿</div>
{% endif %}
</div>
{% endif %}