form, results, form-error

[imiten]

Hi,

summary of problem:
is there way that when I am returning error (oob) I can prevent target from being swapped and instead oob only act ? I have tried hx-preserve setting it to target but does not help.

I have read https://htmx.org/examples/update-other-content/ but it is not what I intend. read on for details.

I am showing at top a form and at bottom a list. Form allows to add items to list. On success of addition in server db I revert with list as partial and using htmx target I am able to update the html fine.

issue is when there is validation error and I revert back with oob with just form having errors. since I want to get efficient I return just form with errors under its fields and it is replacing form fine but since there is no response for target the list is getting removed. Thus now with form situation is I am unable to submit since target got removed.

here are my ui html/partials. Please suggest if oob I am not using correctly or do I need to add list in oob then I feel its defeating my intention to be efficient.

here is gameformoob.html returned when form validation fails:

form id="gameform" class="ui form" 
  2                      hx-post="/game" hx-target="#gamelist" 
  3                                      hx-swap="outerHTML" 
  4                                      hx-swap-oob="true"> 
  5 
  6   <div class="inline field">
  7     {{ form.name.label }} {{ form.name() }}
  8   </div>
  9     {% if form.name.errors %}
 10         <ul class="errors">{% for error in form.name.errors %}<li>{{ error }
 11     {% endif %}
 12 
 13   <div class="field">
 14     {{ form.json_string.label }}
 15     {{ form.json_string(rows='10', cols='40') }}
 16   </div>
 17     {% if form.json_string.errors %}
 18         <ul class="errors">{% for error in form.json_string.errors %}<li>{{
 19     {% endif %}
 20 
 21   <button class="ui button primary" type="submit">Add</button>
 22 
 23 </form>

here is dashboard.html

{% extends "layout.html" %}

{% block content %}

{% include 'gameform.html' %}
{% include 'gamelist.html' %}
{% endblock %}

here is gameform.html note there is no oob attribute.

<form id="gameform" class="ui form" 
                     hx-post="/game" hx-target="#gamelist" 
                                     hx-swap="outerHTML">

  <div class="inline field">
    {{ form.name.label }} {{ form.name() }}
  </div>
    {% if form.name.errors %}
        <ul class="errors">{% for error in form.name.errors %}<li>{{ error }}</li>{% endfor %}</ul>
    {% endif %}

  <div class="field">
    {{ form.json_string.label }} 
    {{ form.json_string(rows='10', cols='40') }}
  </div>
    {% if form.json_string.errors %}
        <ul class="errors">{% for error in form.json_string.errors %}<li>{{ error }}</li>{% endfor %}</ul>
    {% endif %}

  <button class="ui button primary" type="submit">Add</button>

</form>

here is gamelist.html

<table class="ui celled table" id="gamelist">
  <thead>
    <tr><th>Game Name</th>
    <th>Date</th>
    <th>Json</th>
  </tr></thead>
  <tbody>
{% for game in result %}
    <tr>
      <td data-label="Game Name">{{ game.name }}</td>
      <td data-label="Date">{{ game.date_time }}</td>
      <td data-label="Json">{{ game.json }}</td>
    </tr>
{% endfor %}
  </tbody>
</table>

one more thing noticed is if response is not 200 ok then htmx does not do any swapping. It would have been better if it did oob swapping only then above issue probably I could have solved.

[DevOpsCraftsman]

You can do it with oob swap, just inject a boolean variable in your template fragment, like success,
then check it with a if clause in order to trigger the oob of the list.

Edit :
Even better : if not form.errors => trigger the oob swap

[DevOpsCraftsman]

It’s all good, I tested it:

<form id="gameform"
      class="ui form"
      hx-post="/game"
      hx-target="#gameform"  # only target the game form itself
      hx-swap="outerHTML">

  <div class="inline field">
    ...
  </div>
    {% if form.errors %}
        ...
    {% elif form.success %}  # or anything saying that a game has been added
      <div id="gamelist" hx-swap-oob="true">  # Trigger the OOB, targetting the list only
        {% include "gamelist.html" %}  # you need to have the `result` in the context…
      </div>
    {% endif %}

  <button class="ui button primary" type="submit">Add</button>

</form>

[DevOpsCraftsman]

it would be even better to have an inner html template for the body, like _tbody_games.html:

  <tbody id="tbody-games">
    {% for game in result %}
      <tr>
        ...
      </tr>
    {% endfor %}
  </tbody>

You can include it in gameslist.html, and then the OOB is now:

      <div id="tbody-games" hx-swap-oob="true">
        {% include "_tbody_games.html" %}
      </div>

[DevOpsCraftsman]

To go even further, if you have a simple _one_game.html fragemtn template which is one tr only, you can now do:

      <div hx-swap-oob="afterbegin:#tbody-games">
        {% include "_one_game.html" %}  # you need to have the new created game in the context!
      </div>

Of course, use your template fragments in gamelist.html with the include directive, to not waste the refactoring.

Hope this will help you

[imiten]

I have read the sample example on site. I understood that but my problem is different. I do not want to send list in response but keep list as it is on page and just swap the form if there are errors. If no errors then leave form as it is and swap the list.

if form.errors:
  return form-with-errors
else:
  return list-with-game-added

so I am doing it efficiently like we would do if we did pure ajax and swap only needed.

Also in your example div oob is not top level but I read in docs that it should be top level element in response. I hope there is no gap in my understanding.

my understanding:

if form.errors:
  return form-with-errors #failure so will have oob and it will remove target and keep only oob thus list is wiped out.
else:
  return list #success and no oob and it will keep form as it is and swap the list which is desired

my observation:

1. If status 200, item added, list returned, list target swapped all good. form shows with data as it is.
2. if status 200, error, form with error returned with oob target as form, form swapped but list removed. here is where I want to leave the list as it is on page.
3. if status 400, error forrm with error returned with oob target as form, no swapping happening at all. page shows form with no errors and list also as it is. htmx will not process response.

[DevOpsCraftsman]

Okay, so what you need is to listen for a custom event from the list with hx-trigger="game-added from:#gameform" for example.
If the add game succeeded, in the back, add a header to the response you are returning (HX-Trigger="game-added") and the list will get updated.

Very simple and elegant.

[DevOpsCraftsman]

Take 2:

If you are listening for a custom event instead of using OOB, you can achieve what you want:
you can delete the oob.html and let you gameform.html as is, and in gamelist.html:

<tbody id="tbody-gamelist"
       hx-get="/games"
       hx-trigger="game-added from:body"
       hx-target="#tbody-gamelist"
       hx-select="#tobdy-gamelist">

All you have to do in the back to trigger the list refresh now, is to add a response header: HX-Request=game-added.

Here, the little problem about being efficient, is that you are building the all html page every time and using hx-select to only update the tbody only to be swapped.
If you can add a new route, like /games-list that renders only gamelist.html, you can now do:

<tbody id="tbody-gamelist"
       hx-get="/games-list"
       hx-trigger="game-added from:body"
       hx-target="#tbody-gamelist">

[imiten]

I implemented by handling errors in javascript / custom events instead of oob.