I have developed a cleaner, more readable way of using HTMX for modals.
On get request, the View should return a modal only, which is rendered to hx-target="#modals-here"
On post, we also set hx-target="#modals-here"
If the POST data is invalid, then we send the modal back with the appropriate guidance
If the POST data is valid, We preocess the request and send back a small piece of htmx (kept as a string in the view) to refresh the state of any objects that have changed, and clear any forms. Examples of this is below:
Clears text input
htmx = '<input id="new_tag_text_input" hx-swap-oob="true" type="text" name="new_question_tag">'
Refresh the state
htmx = f'<div hx-get="{category_options_endpoint}" hx-trigger="load" hx-target="#id_category" hx-swap="innerHTML"></div>'
(NOTE: Refreshing the state like this will result in an extra request, but I feel for this project, this is worthwhile for the simplicity of keeping the HTMX rendering in one place only- the #modals-here div )
I have developed a cleaner, more readable way of using HTMX for modals.
Clears text input
htmx = '<input id="new_tag_text_input" hx-swap-oob="true" type="text" name="new_question_tag">'Refresh the state
htmx = f'<div hx-get="{category_options_endpoint}" hx-trigger="load" hx-target="#id_category" hx-swap="innerHTML"></div>'(NOTE: Refreshing the state like this will result in an extra request, but I feel for this project, this is worthwhile for the simplicity of keeping the HTMX rendering in one place only- the #modals-here div )