#htmx hx-trigger question

38 messages · Page 1 of 1 (latest)

marsh acorn
#

It has been indicated that I can trigger the element to update element based on python variable changes.
Please confirm how this works. I'm having trouble understand the htmx documents and want to confirm if it will actually cause the update of an element or if it will only get updated information from the element.

tough goblet
#

YOOOOO HTMX MENTIONED !!

#

You can't, you'd have to call the backend for updates (from your HTMX) and then re-render

marsh acorn
tough goblet
#

Well

marsh acorn
#

Someone suggested this:
<div hx-get="/latest_updates" hx-trigger="every 1s">
Nothing Yet!
</div>

tough goblet
#

What's your use case here?

#

I used it more for a loading state on a background job

marsh acorn
#

Well, it's a pi pico w and what I would like to do is to show the pin state.

The python variable already detects pin state either .value() true or false or .value(0) or .value(1).

So in this case when pin state changes I have a python variable that changes from level="NORMAL" to level="HIGH". Basically pin level detection.

tough goblet
#

I don't think HTMX is the right thing for that

#

If you want realtime updates you'd need websockets, HTTP is a pull model (client requests from server) while you can use websockets with the push model (server sends stuff to client)

#

So while its status pending I just return something like this:

<div hx-get="/jobs/status/JOB_ID" hx-swap="outerHTML" hx-trigger"load delay:3s">
<p> loading stuff ok cool>
</div>

this one reloads itself every 3 seconds in this case and then when the job is completed I display the full card with the job stuff + link to visit the job's page

marsh acorn
#

So once the change in python value occurs I want to see this on screen like a high level float switch that either closes the pin to ground, or opens it.

I have a lot of web simulated stuff on the page, but in reality that was only for learning and simulating the features of the pin state.

I have yet to actually monitor the pin state via web interface. AND without any user interaction or events other then the pin state.

tough goblet
#

I guess

marsh acorn
#

I think your right

tough goblet
#

You could use HTML server-sent events but I find that a bit weird / haven't used it

marsh acorn
#

can you confirm if hx-get or hx-trigger would even be able to actually get the html element change this way ?
Seems to me that it would only get something if the element itself had it's values and data there.

However, if the page did not refresh the data would be the same as it was when I opened it. Not like event onclick that changes the data and updates the innterText etc.

Those event methods are totally different and I can't see how to get the data to the element by a pin state change actually.

#

Can you confirm if htmx will even be able to do this at all. I mean even with a timed get or trigger etc.

#

I don't see it doing that if it's not refreshing or getting the data from python.

tough goblet
#

Your browser would be polling the Python backend every X seconds

#

if it's not polling the server nothing else will be happening lol

marsh acorn
#

ahhh ok so theoretically it could do it this way.

tough goblet
marsh acorn
#

thanks for the responses by the way.

tough goblet
#

since it just replaces itself with the loading state until its finished loading, in your case you would just replace it with the correct value continually

marsh acorn
#

as far as I know I put into the head, but I'm not sure about the syntax.

Documentation shows <div but I assume I can use the hx-trigger call in the element itself like <h3 ..... etc. or whatever ? Or does it need to be in a scrip like javascript functions etc.

#

This is the line I want to get updated mostly if I can understand syntax I can probably update anything from there.
<h3>LEVEL is <span id="textlevel">{level}</span><h3/>

tough goblet
#

People typically use divs, haven't ever tried to put stuff on something that's not a dict

#

The HTMX idea is to send that entire thing down (and not only the level)

marsh acorn
#

{level} is the python variable in the html block of python etc.

tough goblet
#

So you're also using some templating library with HTMX I guess

tough goblet
marsh acorn
tough goblet
#

wat

marsh acorn
#

Line #327-ish for interrupt function and pin state changes based on pin.

https://www.pythonmorsels.com/p/2uqer/

Disregard all that other web based simulator stuff and listeners that is for the web interface simulation etc. Not relevant to pin state really. I will likely get rid of all that except the push notification stuff.

Anyhow level = "NORMAL" pin open.
level ="HIGH" pin closed.

I short the .value() = False or .value()True
etc etc.

2uqer - Python Pastebin - Python Morsels

A free Python-oriented pastebin service for sharing Python code snippets with anyone

tough goblet
#

ah you just string format them in