htmx insert multiple table rows

  Kiến thức lập trình

I’m using Django, if that makes any difference. Anyway, I have this tbody element in my template:

            <tbody
               id="log-stream-table-body"
               hx-get="{% url 'pages:log_stream_rows' %}?last_ts={{ last_log_ts }}"
               hx-trigger="every 30s"
               hx-target="this"
               hx-swap="afterbegin"
            >
               {% include "pages/_home_log_stream_rows.html" with log_stream=log_stream %}
            </tbody>

The url it’s pointing to returns this template snippet (which is actually pages/_home_log_stream_rows.html used in the include above):

{% for log in log_stream %}
    <tr>
        <td>{{ log.ts|date:"Y-m-d H:i:s.u" }}</td>
        <td>{{ log.process }}</td>
        <td>{{ log.source }}</td>
        <td>{{ log.message }}</td>
    </tr>
{% endfor %}

<div
    id="log-stream-hyperscript"
    hx-swap-oob="outerHTML"
    data-log-ts="{{ last_log_ts }}"
></div>

The problem is that I’m returning multiple tr elements at the top level, so the whole thing just fails.

I can wrap it in a <template> tag, and it works, but of course then nothing is visible. Wrapping in anything else (div, andother tbody) just breaks the display in different ways.

How can I group these multiple tr elements so that htmx adds them in correctly at the top of my table?

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT