The hyperscript implementation gives you a proxy variable that you can reconnect at any time, so just wrap an event handler around your input, make a new endpoint for your SSE, then make a new connection.

looks like the hyperscript SSE implementation has changed quite a bit since I played with it last... reading....

If you want to stay in htmx, you might try loading an html fragment with the new variable. Old SSE connections will be dropped, and the new fragment could make its own connection when it loads.

(i'll try that too, thanks!)

Its not exactly what you were looking for, but it would work.

And htmx support for SSE is supposed to change a bit with the next release. The code is merged into dev to move it out of the core and into an extension. It’ll work about the same, but calls will be a little different. The benefit is to lighten the htmx core for anyone who’s not using SSE and WebSockets.

okay... cool. I was able to send a fragment from server with the search encoded

hx-sse="connect:/events/results?search={{.search}}

such that it works as expected.

A hyperscript approach:

<div _='on load put ("connect:/events/results?search=" + #search.value + " swap:message") into my @hx-sse then call htmx.process(me)' hx-swap="beforeend">
    ...loading
</div>

or

<div id="stream" _='
eventsource Thing
    on message
        append it to #stream
    end
end
on load or keyup from #search debounced at 500ms
    put "" into me then
    call Thing.open("/events/results?search=" + #search.value)
'>

Hey Guys .. is it possible to dynamically change hx-get ? or set the hx-get url with a javascript function instead?

The date field has hx-get = "https://some-url/today" initially but when the user changes the date ... I want the hx-get="https://some-url/2022/01/04" and call that url to render the response

@User i had a bit of luck with that (see above) using htmx.process, but that only works once. After that i think you need to use hyperscript.

Ok .. let give htmx.process() a shot

I tried changing hx-get attributes (new/changed URL) with JavaScript "change" event listener and then calling htmx.process(document.body) .. did not produce desired result

instead I ended up just calling htmx.ajax after date change .. and that worked just fine.

htmx.ajax('GET', getURL(), { source: '#hdate'}) this way it preserved rest of the initial declarations like nunjucks-template="response-template"

smh ... I completely missed the last bit you said about hyperscript @User .. I am pretty sure I ll find a use for that in a different scenario.

You can to do it in the

htmx:configRequest

event https://htmx.org/events/#htmx:configRequest by changing the event.detail.path value. So in that event you can read the date and add it to the path or you can also add it as a parameter in

evt.detail.parameters

That power curve meme that appeared on the twitter page recently is really good

Keep tapping 'em out

I believe there is a github issue for this, but right now I think the answer is no. Certainly not designed that way.

htmx expects new content to be returned via an ajax call, so it isn't as dynamic when the DOM is mutated out of band

can I ask for the use case?

(ah, never mind)

The use case you outline would be solved via a parameter, which would be dynamic, in "normal" HTML. Is that unacceptable?

I solved this recently using hyperscript fetch with dynamically computed path, just like you’re describing. It would be sweet to be able to have an expression for hx-get I think. Or is that going down an anti-pattern path @mysterious-toddler-20573 ?

htmx already being bundled into project starter kits github.com/mikestefanello/pagoda

I've been using the

htmx:configRequest

event for a long time to make the path dynamic by changing the

event.detail.path

value and that works great for me. The use case is that I send all the htmx requests to the same URL in Joomla and WordPress which is a long ugly URL, but in hx-get I just have a simple value which I use to generate the dynamic URL.

So if I have

hx-get="increment"

, that value is read and used in event.detail.path which looks something like `index.php?option=something&component=counter/increment"

btw - Any way to disable the auto-inheritance from a htmx-node? Thinking of just wrapping a

main-content

div in

hx-boost

- main issue here is also wanting to use more elaborated htmx fragments within the

main-content

, like so

html
<div id="main-content-wrapper"
     hx-boost="true"
     hx-select="#main-content"
     hx-target="#main-content"
     hx-swap="outerHTML show:window:top"
     hx-push-url="true">
  <div id="main-content">
    <div id="unique-snowflake" 
         hx-get="/xapi/snow/" 
         hx-target="#unique-snowflake">
      `/xapi/snow/` returns a fragment that's just the `<div id="unique-snowflake">...`
      This will just be emptied, as the auto-inheritance of the `hx-boost`-wrapper will
      try to select `#main-content` in the response body.
    </div>
  </div>
<div>

You could of course define

hx-select="unset"

on the

#unique-slowflake

-div, but I could imagine having to do that on every child-node wouldn't scale well, instead of just being able to define e.g.

<div id="main-content-wrapper" hx-inherit="false">

Wrapping

#main-content

in yet another div definitely disables the inheritance, but then results in the original

hx-boost

in not working -

<div hx-select="unset" hx-target="unset" hx-swap="unset">