htmx.ajax context object missing hx-select-oob attribute equivalent

[believelody]

Hi guys,
For some reason, I have to use htmx with its js api, especially htmx.ajax method. The thing is, I want an equivalent of this:

<div
    hx-put="/path/to/api"
    hx-target="#myDiv"
    hx-vals={JSON.stringify({ key1: "val1", key2: "val2" })}
    hx-select-oob="#otherDiv, #anotherDivAgain"
>Click me</div>

with htmx.ajax().
I can do this with some attributes like so:

htmx.ajax("PUT", "/path/to/api", {
    target: "#myDiv",
    values: JSON.stringify({ key1: "val1", key2: "val2" })
})

But unfortunately, it seems that there isn't an equivalent property for hx-select-oob.

Is there any reason why all properties hx-* don't have their counterparts in htmx.ajax, in my case, "hx-select-oob" ?

Sincerely

[Telroshan]

Hey, indeed all properties are not overridable through htmx.ajax at this point, most likely because we simply didn't take the time to make all of them overridable back then, and there were no requests for those. We added the select override for ex, as people requested it.

For some reason, I have to use htmx with its js api

May I ask what this "for some reason" is? htmx.ajax lets you define a source element, of which all the hx- attributes are applied to the request made through htmx.ajax. So here, if you can do that (hence the question about "some reason", this will depend on whether you're able to use this or not), you may simply define hx-select-oob on the source element and it'll be applied.

Hope this helps!

[believelody]

Hi @Telroshan , thanks for your quick response. About the "some reasons", here is a short explanation:

I have a component composed of two buttons and an input. By using Alpine.js, all of them mutate a variable "quantity". I have to make an ajax request when using one of them, but only if two conditions are respected: quantity is between min and max.
I could apply hx-* in each one, but it's condition requirement my problem. So I searched a way to write a js script that test thoses conditions and make my request if it's ok ! Something like:

if (quantity < min || quantity > max) {
    throw new Error()
} else {
    htmx.ajax(...)
}

About your solution, does this mean I can do this:

<div
    id="quantity-container"
    hx-select-oob="#antoherDiv"
    x-data="{ quantity: 1, min: 1, max: 5 }"
    ---------------------------
    x-init="
        if (quantity < min || quantity > max) {
            ...
        } else {
            htmx.ajax("PUT", "/path/to/api", { source: "#quantity-container", ... });
        }
    "
    ---------------------------
>
    <button :disabled="quantity <= min">-</button>
    <input name="quantity" />
    <button :disabled="quantity >= max">+</button>
</div>

[Telroshan]

Thanks for the details @believelody

Yep, that should work! The source element, quantity-container in this case, will apply all of its hx- attributes to the request, including hx-select-oob

[believelody]

I confirm that it works as expected. Thanks for your help.