https://htmx.org logo
Powered by
# htmx-general
  • m
    You need to be able to control the async color of your functions (or use callbacks) to deal with it
  • m
    hyperscript would help to an extent, but I wouldn't recommend writing a whole app in it
  • a
    with valid tokens, I have the rest of the functionality working as I expected - just have to encourage users to only ever spend <= 60 seconds on a page...
  • a
    I've never looked at hyperscript - any suggestions for specific concepts/functionality that would help in this area?
  • m
    hyperscript has an async-transparent runtime
  • m
    but I wouldn't recommend it for this
  • m
    🤦‍♂️
  • m
    OKOK
  • a
    I may as well check out hyperscript, see if I can make it work - I'm really trying to avoid an SPA
  • m
    Just curious if using 
    from:
    together with some modifiers in 
    hx-trigger
    should work. I tried 
    keyup from:#keywords changed delay:300ms
    and also 
    keyup[event.target.id == 'keywords'] changed delay:300ms
    but neither is recognized and also the console doesn't show any errors.
  • m
    that should work
  • m
    let me create a test
  • m
    Thanks. And this isn't htmx specific, but I am trying to understand how to avoid or cache preflight requests. Does anyone have experience with this? I am adding a widget to a site that makes GET requests to another site using htmx. The request URL varies because it's a search request. Is it possible to avoid the preflight requests at all or cache them at the beginning even though the request URLs are different?
  • m
    Thinking on it, I bet it’s the changed modifier because that is inspecting the current element rather than the source element. Can you remove that and test?
  • m
    Yes, that was it!
  • m
    Managed to get rid of the pre-flight requests by deleting the HX headers since in this particular case they are not needed.
  • c
    Is my understanding correct when I say that polling using 
    hx-trigger="every 2s"
    is basically the same as using load polling with 
    hx-trigger="load delay:2s"
    , assuming in both cases a 
    <div>
    is returned with the same trigger?
  • m
    Yes, what you are describing in the latter case is called "load polling". see https://htmx.org/docs/#polling & https://htmx.org/docs/#load_polling
  • m
    in the latter case you want to be careful to use an outerHTML swap, so you don't end up with a bunch of nested divs
  • m
    because the default swap strategy is innerHTML in htmx (you can update this via settings if you'd like, see htmx.config.defaultSwapStyle here: https://htmx.org/docs/#config)
  • b
    I used the normal link to url Thanks.
  • c
    thanks! yes I was referring to the docs, I guess my real question is reading that I'm not sure what the difference is between regular polling and load polling practically.. but i guess there are different use cases
  • m
    regular polling will just keep going on forever
  • m
    with load polling you can be more dynamic (e.g. implement exponential backoff via the server) at the cost of a bit more complexity
  • m
    both work well, just depends on what you are trying to accomplish
  • c
    makes sense, thanks! another quick (related) question: I have a button to generate a report (which takes 5-10 seconds), so am switching the button out for a 
    disabled
    button with a spinner, and that polls a status view - which will swap it out again for a download button when the report is ready. if the button is clicked it will retain focus, so on every swap of the button (every poll) it temporarily flashes (i assume because it temporarily loses focus and regains it again). is there any good way to prevent that?
    Copy code
    html
    <div id="generate_buttons"
        class="btn-toolbar"
        hx-get="{% url 'core:report-status' id=report.id %}"
        hx-trigger="every 2s"
        hx-swap="outerHTML">
        <button type="submit" value="Submit" id="submit"
            class="btn btn-primary disabled">
            <span class="spinner-border spinner-border-sm" role="status"></span>
            {% translate "Generating ..." %}</button>
    </div>
  • m
    i you put an ID on it and then an 
    hx-preserve
    attribute, it should keep the button without flashing.
  • c
    That is perfect!
  • b
    Do you know if 
    hx-swap-oob
    is supposed to be taken into account on 
    hx-boost
    -ed requests/responses? The behavior I have is that the out of band element is deleted in the dom, but not replaced with what is returned from the response.
  • m
    for the oob swap to work, an element must exist that matches its selector in the DOM
1...367368369...1146Latest