Add More - Under Experimentation
plos_add_more is built with HTMX to enable
progressive enhancement. HTMX is not required. Without it, add and delete
buttons submit the surrounding form normally and the page view handles
everything. When HTMX.js is loaded, those same buttons instead POST to
htmx_url and swap only the list container in place, without a
full page reload. The swap target is the component's outer
<div id="{name}-add-more">; the endpoint must return
only that element.
Notes of Concern
Note this is still an experimental feature which may not work. Using two or more patterns, particularly the Add More Pattern, on any given page will cause rendering issues and odd behavior.
Interactive demo
Add and remove patents below. HTMX will swap the list without a full page reload. If you disable JavaScript the form will still work via full POST.