I've started learning HTMX and I'm trying to use it to reduce the javascript code in the client side of a (rather small) webpage that I'm building. I'm currently trying to reduce the code that fills two datalists with users registered in the webpage. This is what I have made so far, and it works:

<div>
    <label>White:</label>
    <input list="datalist_white_users" />
    <datalist
        id="datalist_white_users"
        hx-get="/query/html/user/list"
        hx-trigger="load"
        hx-swap="innerHTML"
    ></datalist>
</div>

<div>
    <label>Black:</label>
    <input list="datalist_black_users" />
    <datalist
        id="datalist_black_users"
        hx-get="/query/html/user/list"
        hx-trigger="load"
        hx-swap="innerHTML"
    ></datalist>
</div>

However, this sends two GET commands to the server which sends back the same list of users twice. With plain javascript, I had one simple GET command and then I could fill both lists with the same data.

export async function get_query_html_user_list(req: any, res: any) {
    const list = ...; // list of users
    let data: string = '';
    for (const [name, rand_id] of list) {
        data += `<option value="${name}" id="${rand_id}">`;
    }
    res.send(data);
}

How can I achieve the same with HTMX? I've heard about swap-oob and multi-swap but I couldn't get them to work.

I've started learning HTMX and I'm trying to use it to reduce the javascript code in the client side of a (rather small) webpage that I'm building. I'm currently trying to reduce the code that fills two datalists with users registered in the webpage. This is what I have made so far, and it works:

<div>
    <label>White:</label>
    <input list="datalist_white_users" />
    <datalist
        id="datalist_white_users"
        hx-get="/query/html/user/list"
        hx-trigger="load"
        hx-swap="innerHTML"
    ></datalist>
</div>

<div>
    <label>Black:</label>
    <input list="datalist_black_users" />
    <datalist
        id="datalist_black_users"
        hx-get="/query/html/user/list"
        hx-trigger="load"
        hx-swap="innerHTML"
    ></datalist>
</div>

However, this sends two GET commands to the server which sends back the same list of users twice. With plain javascript, I had one simple GET command and then I could fill both lists with the same data.

export async function get_query_html_user_list(req: any, res: any) {
    const list = ...; // list of users
    let data: string = '';
    for (const [name, rand_id] of list) {
        data += `<option value="${name}" id="${rand_id}">`;
    }
    res.send(data);
}

How can I achieve the same with HTMX? I've heard about swap-oob and multi-swap but I couldn't get them to work.

• html
• htmx

1 Answer 1

Here's two different approaches for hx-swap-oob. As it sounds like you don't have a main swap, for the triggering elements you would use hx-swap="none". I've used templates below, since for an innerHTML OOB swap the outer wrapper is thrown away.

1. An OOB swap per list:

<template id="datalist_white_users" hx-swap-oob="innerHTML">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
</template>
<template id="datalist_black_users" hx-swap-oob="innerHTML">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
</template>

2. A combined OOB swap:

<template hx-swap-oob="innerHTML:#datalist_white_users,#datalist_black_users">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
</template>