.

cards/views.py

@@ -91,20 +91,22 @@ def card_create(request):
             card.save()
             if is_htmx(request):
                 card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
-                # Also return an out-of-band fragment to replace/clear the form container
-                form_html = render_to_string('cards/_form.html', {'form': DinosaurForm(), 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
+                # Clear the modal via out-of-band so the modal-root is emptied
+                oob = '<div id="modal-root" hx-swap-oob="true"></div>'
                 return HttpResponse(card_html + oob)
             return redirect('cards:list')
         else:
             if is_htmx(request):
-                # Return the form as an out-of-band fragment so it updates the form container
-                form_html = render_to_string('cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
-                return HttpResponse(oob)
+                # Return the form wrapped in a modal fragment so it updates the modal-root
+                form_html = render_to_string('cards/_form_modal.html', {'form': form, 'background': background, 'backgrounds': backgrounds}, request=request)
+                return HttpResponse(form_html)
     else:
         form = DinosaurForm()
 
+    # If this is an HTMX request, return the modal-wrapped form so it can be
+    # injected into `#modal-root`. Otherwise return the standalone form page.
+    if is_htmx(request):
+        return render(request, 'cards/_form_modal.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
     return render(request, 'cards/_form.html', {'form': form, 'background': background, 'backgrounds': backgrounds})
 
 
@@ -126,18 +128,19 @@ def card_edit(request, pk):
             card.save()
             if is_htmx(request):
                 card_html = render_to_string('cards/_card_item.html', {'card': card, 'background': background}, request=request)
-                # Clear the form container via OOB so the edit form disappears after successful save
-                oob = '<div id="htmx-form" hx-swap-oob="true"></div>'
+                # Clear the modal via OOB so the modal-root is emptied
+                oob = '<div id="modal-root" hx-swap-oob="true"></div>'
                 return HttpResponse(card_html + oob)
             return redirect('cards:list')
         else:
             if is_htmx(request):
-                form_html = render_to_string('cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
-                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
-                return HttpResponse(oob)
+                form_html = render_to_string('cards/_form_modal.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds}, request=request)
+                return HttpResponse(form_html)
     else:
         form = DinosaurForm(instance=card)
 
+    if is_htmx(request):
+        return render(request, 'cards/_form_modal.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})
     return render(request, 'cards/_form.html', {'form': form, 'card': card, 'background': background, 'backgrounds': backgrounds})