Can I use hx-include with <nav> and <a> to automatically append params to GET requests?

[Teajey]

Here's what my nav looks like. I'm trying to add the environment and unit to GET requests so that I can persist an important form through the URL. This doesn't seem to work:

    <nav
      id="navLeft"
      hx-boost="true"
      hx-target="#navLeftView"
      hx-swap="outerHTML"
      hx-include="[name='environment'][name='unit']"
    >
      <a
        href="/events"
        hx-get="/events?partial=below"
        hx-push-url="/events"
      >Events</a>
      <a
        href="/device_hooks"
        hx-get="/device_hooks?partial=below"
        hx-push-url="/events"
        >Device Hooks</a>
    </nav>

Is there something missing, or is there a better way to achieve persisting URL params between links?

[andryyy]

Hi, try with this <nav>:

    <nav
      id="navLeft"
      hx-boost="true"
      hx-target="#navLeftView"
      hx-swap="outerHTML"
      hx-vars='js:{environment: htmx.find("[name=environment]").value, unit: htmx.find("[name=unit]").value}'
>

[Teajey]

Unfortunately that seems to have no effect

[andryyy]

Besides that, you just missed a comma in the list: hx-include="[name='environment'], [name='unit']". I totally missed that. 😄 Should work as expected then.

[andryyy]

Unfortunately that seems to have no effect

Hum, works in my test env. Are you including elements with a third party template system or sth like that? HTMX must be initialized by calling htmx.process("#whatever") first.

[Teajey]

No effect with the comma; I also tried using hx-vals instead of hx-vars, no luck 😓

[Teajey]

Nevermind! It was hidden by my usage of hx-push-url.

Of course, if I change to hx-push-url="true", the partial param is also added to the URL, which I don't really want to show... /device_hooks?partial=below&environment=DEV&unit=dan

Maybe I will just have to use something else instead of my partial param

[andryyy]

I am using it like that in a web app I am currently working on (therefore the "configs" urls):

    <nav
      id="navLeft"
      hx-boost="true"
      hx-target="#navLeftView"
      hx-swap="outerHTML"
      hx-include="[name='environment'], [name='unit']"
    >
      <a
        href="/configs"
        hx-get="/configs/?partial=below"
        hx-push-url="/something"
      >Events</a>
      <a
        href="/configs"
        hx-get="/configs/?partial=below"
        hx-push-url="/something"
        >Device Hooks</a>
    </nav>
    <div id="navLeftView"></div>
    <input type="hidden" name="unit" value="1" />
    <input type="hidden" name="environment" value="2" />

It does not include any parameter in the URL but does what hx-push-url defines.

Are you perhaps submitting a form or a parent div that includes unit and environment by clicking a link in #navleft?

You may need to exclude these parameters.

Can you check with htmx.logAll() enabled in the console?