https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • h
    Hey, this is something that might interest some of you: a way to make htmx store a pristine version of the dom - exactly as it was on initial page load - in the history cache, rather than taking a snapshot after the dom has been changed by whatever javascript you might happen to be running on the currently loaded page. This can be a pain when swapping in content that contains Alpine.js components (for example) which injects elements into the dom - htmx by default will snapshot the dom state after Alpine has been initialised, so when you hit the back button and htmx restores from history things go pear shaped, because Alpine tries to initialise markup that has already been manipulated. The same is true of any JS you might run that changes the DOM - typically you need to reinitialise the script using the original pristine markup. https://gist.github.com/croxton/e2c33bd22591f9a5bd8c9d23a56c9edc
  • m
  • m
    updated essay, including a section on inline scripting
  • m
    sections are linkable too
  • m
    please give feedback if interested, will publish later today
  • h
    Looks good to me. Being able to compose behaviour directly in the markup (with _hyperscript or Alpine) definitely feels like the right way to go, when using htmx. Something new/old is emerging with this kind of tooling (Alpine, htmx, Tailwind etc) that is really interesting.
  • b
    I have to say that. Scripting straight on the button feels a bit like VB6. And it does not feel wrong at all.
  • b
    I like the ending quote: Basta a cada dia seu mal.
  • m
    VB6 was amazing
  • m
    still the best live-code-editing-and-debugging experience I have ever had
  • m
    alien technology compared to what we have to deal with today
  • b
    I have to agree.
  • b
    My limited experience with Pharo/GToolkit indicates that it is a close second.
  • h
    So I turned this into an extension, and made it a bit more flexible. Now you can add the attribute 
    hx-history-preserve
    to any container and the child nodes inside will be preserved in their original state for history restores.
  • h
    That means you can be more selective about the elements you do/don't want to be restored to a pristine state.
  • s
    Hi all, I'm playing around with HTMX and Bootstrap modals, I came across this video:

    https://www.youtube.com/watch?v=3dyQigrEj8A&ab_channel=BenoitBlanchon▾

    I like his approach, but it has some downsides, every time you open the modal a new form is generated, which is annoying when you are filling the form, close the modal, and open the modal again, the form has been reset. What do you think about his approach?
  • s
    This is the technique I currently use to render/show bootstrap modals with HTMX: HTML
    Copy code
    <button 
    class="btn btn-success" 
    hx-get="{% url 'get_model_form' 'attribute_form' %}"
    hx-target="#generic_modal_form_placeholder"
>
    <i class="fas fa-plus"></i>
</button>
    JS:
    Copy code
    const modal = new bootstrap.Modal(document.getElementById('generic_modal_placeholder'))
htmx.on('htmx:afterSwap', (event) => {
        if (event.detail.target.id == 'generic_modal_form_placeholder') {
            modal.show()
        }
    }
)
  • s
    Is this a proper way to do it? Like i said it has some downside like refreshing the form each time i press the + button (hx-trigger="click once" does not work here). Any idea how to fix it?
  • m
    I think you can do purely client-side modals using 
    form.reset()
    and a bit of htmx for saving the contents, but it dependes a lot on the API. I haven't worked w/ bootstrap modals in forever though.
  • s
    Thanks for the response, I think the easiest would be to have hx-trigger="click once" still in place this way it does not re-render the form, then when I click on the modal + button again, "modal.show()" should be triggered again in JS somehow. This way it just opens the modal again with the form and content still there
  • s
    Is there an HTMX event that is fired when hx-trigger="click once" has been clicked twice? Something like htmx.on('htmx:OnceTriggerAlreadyDone')
  • m
    Hey all, does anyone have experience using htmx alongside shoelace? I'm getting started with some simple examples, and a number of components don't send their values along with the submit request. For example, the following doesn't send any form data:
    Copy code
    <form hx-post=/foo" hx-include="[name='mycheckbox']" hx-target="#target">
  <sl-checkbox name="mycheckbox">Bar</sl-checkbox>
  <button type="submit">Submit</button>
</form>
<div id="target"></div>
    Using 
    <input type="checkbox">
    instead of 
    <sl-checkbox>
    works fine, sending 
    {'mycheckbox': 'on'}
    . Am I missing something simple (very likely, I'm pretty new to all this)?
  • s
    How to trigger htmlx event on mouseover if the cursor stays for 1s? If it's not - then don't trigger the event
  • m
  • m
    Copy code
    html
<div style="background-color:red;width:500px;height:300px;padding:12px;font-size:64px"
     hx-trigger="doit"
     hx-get="/example"
     _="on mouseenter
          wait for mouseout or 1s
          if the result is not a MouseEvent
            trigger doit">
  Move mouse into me and wait a sec
</div>
  • m
    async transparency in hyperscript + htmx is really, really cool
  • e
    Looks like you can use 
    event.stopImmediatePropagation()
    😆
  • m
    Gonna give a pretty punchy lecture to the MSU web development class tomorrow. I will record it and post it here. They are learning how to make a node-based react application.
  • g
    "This course will be extremely useful to many of you in your professional lives. Drop it."
  • m
1...914915916...1146Latest