Single Page Application

you sure it isn't just a standard cors request?

if a dev at my company asked me this question the first thing id have him do is show the browsers network tab.

It is in the network tab of Dev Tools I see the 2 requests

Good morning. I'd like to do polling like this:

<div hx-get="/activity" hx-trigger="every 60s"></div>

But I'd also like a way to turn it off and back on. Ideally an icon that you click that stops or starts polling as well as switching the icon itself to indicate whether it is polling or not. If that doesn't work, just a checkbox would work. It seems like all the parts are there but I'm not sure how to put them together. Is something like this possible and simple? FYI - I'm a DBA dabbling in the front-end world.

You can apply filters to polling like this:

html
<div hx-get="/activity" hx-trigger="every 60s[pollingEnabled]">

</div>

And then set a global variable via javascript or hyperscript:

html
    <script>
       window.pollingEnabled = true;
    </script>
    <button onClick="window.pollingEnabled = true">Enable Polling</button>
    <button onClick="window.pollingEnabled = false">Disable Polling</button>

If you are really adventurous, here is an exotic hyperscript implementation:

html
<div id="polling-div"
     hx-get="/activity" hx-trigger="fetch"
     _="init repeat forever 
               wait 60s then 
               trigger fetch unless @data-paused is 'true'">

   ...

</div>
<button _="on click set the #polling-div's @data-paused to false">
  Enable Polling
</button>
<button _="on click set the #polling-div's @data-paused to true">
  Enable Polling
</button>

@User I would stick w/ the javascript 🙂

I'm a DBA. I like that you think I'm adventurous. 🙂 I'll check them both out. Thank you!

had to rejigger it a bit (unless wasn't working properly, will investigate) but this works

I should say, the solutions that I have given you are client side. If you want to do this server side instead, you would do something like this:

html
<div id="polling-div" 
     hx-target="this" hx-swap="outerHTML"
     hx-get="/activity" hx-trigger="every 60s">

  <button hx-get="/activity/start">Start Polling</button>
  <button hx-get="/activity/stop">Stop Polling</button>
</div>

where the

/activity/start

and

/activity/stop

end points render pretty much the same thing as activity, but with the

hx-trigger

included or omitted.

(and of course, the buttons could be conditionally included on the server side, depending on the state of polling)

a bunch of different ways to skin this cat

@UserAh, that's an interesting approach

I was wondering whether it is possible to trigger two HTMX swaps at different locations when one single button is pressed. Like using hx-target but with two distinct targets instead of just one. use case: I am loading a div that encompasses all the content in a page into another page, in the same div on said page. The problem I'm running into now is that the head section of the page that triggered the request is retained and as such some of the CSS data is not being loaded (the content is made up of several blocks of html, each with their own distinct CSS file which are loaded into the head on a full page refresh), so I'm looking for a way to both insert the content div and simultaniously refresh the head of the page. The reason why I'm not targeting the HTML element to do this is because 1. Both the footer and header menu don't need to be replaced as they are identical on both pages and 2. Because I'm running an animated div over the screen to siginify a transition. If I target the HTML element, that div is also removed and breaks the animation. Is there a way to achieve this?

sounds like you might want to use an out of band response: https://htmx.org/docs/#oob_swaps

Thanks for you response! I was perusing the docs and kind of found that out already. Though I am wondering, is it possible to determine which HTMX calls this oob response triggers on? I'm asking since some of my pages that can be swapped in, in the above way have other HTMX calls on them as well. Such as a blog page with pagination. So I want the head to refresh when the page is "navigated to" from something that is not part of the blog but not when I click through the pagination of the blog itself.

seems like you could achieve that by looking at the URL requested

htmx also sends some metadata as headers that might be useful

Another attribute that you might find useful is

hx-preserve

which will preserve an element by ID: https://htmx.org/attributes/hx-preserve/

Ok thanks!

yeah, if you are fine with just refreshing the whole page, tossing an

hx-boost

on the

body

will work

and it'll be a lot simpler than what you have 🙂

generally I'm in favor of simplicity until performance becomes an issue (and then a cache before adopting micro-updates to the UI)

sorry I wasn't more help earlier, got distracted by some hyperscript fun