https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • b
    thank you for the reply; forgot to mention that I tried this initially to no avail
    Copy code
    {% block extra_js %}
<script type="module" src="{{tree_populator_js}}"></script>
<script>htmx.process(document.body);</script>
{% endblock extra_js %}
    best i can tell so far: the 
    <script>
    is loaded to the DOM just fine but no call is made to the 
    src
    attribute post 
    hx-swap
    .
  • b
    *Update*: wasn't able to get it to work within the swapped template so as an alternative solution, created a mutation observer in the base template so that once the target div was declared in the swapped template, it would call the function
  • s
    If you found the solution, then please help to improve the docs. Open a Issue or PR, so that other developers find the solution earlier. Thank you
  • b
    I realize this is possibly not an htmx question but is anyone in here pairing up django + htmx + alpine js? If so how are you getting data in and out of alpine js?
  • h
    On a small scale you can use the data directive to set the data into html
  • h
    Or are you talking about the store?
  • c
    so i just watched

    https://www.youtube.com/watch?v=L_UWY-zHlOAâ–¾

    and really enjoyed the talk... i've also spent some time lately playing with https://github.com/hotwire-django/turbo-django . As far as I can tell, there's a lot of (conceptual, anyway) overlap. I feel like turbo/hotwired might help more with progressive enhancement. But I'm not 100% certain of that... has anyone thought much about both, and, if so, might you care to talk about what might take you towards one versus the other for a "green field" project?
  • b
    @User x-data is fine for getting data into alpine js but curious how you're getting it back out?
  • m
    htmx is lower level than hotwire. it is a more direct extension of the HTML model, whereas turbo and other parts of hotwire have more magic. With htmx you would need to be disciplined about progressive enhancement, for example, because it gives you a lot of low level building blocks, but that's not the case with turbolinks. htmx does have 
    hx-boost
    which acts like turbolinks to an extent, but it is not as complete and is not designed to be.
  • c
    hmm. thank you!
  • c
    have you seen any good examples of 
    hx-boost
    in action?
  • c
    "magic" in hotwire (and turbo*) is a good way to phrase why i'm still exploring the space instead of running off and coding 🙂
  • m
    the htmx website uses hx-boost for the navigation bar
  • m
  • c
    so if i use 
    hx-boost
    with 
    hx-target
    and the server sends down HTML for the whole page, will it try to replace the 
    innerHTML
    of the target with the whole page, or will htmx find the target in the page the server sends and swap that innerHTML into the target in the existing DOM?
  • c
    (I'm currently whacking together a demo app to try this sort of thing out myself, but if you know offhand it might save me a failed experiment or two 🙂 )
  • m
    By default 
    hx-boost
    swaps the body. If you put an 
    hx-target
    on a boosted element (or a parent of the boosted element) then it will replace that target instead.
  • m
    generally I recommend targeting the body w/ 
    hx-boost
  • m
    history management and so forth gets tricker the fancier you get 😑
  • h
    Setting the value of a form with x-model and submitting it
  • b
    awesome, I'll look into that. Thank you
  • h
  • b
    ahh yeah, thats exactly what I was hoping to find
  • h
    It's so nice when a library has exactly the construct you expect it to
  • h
    :)
  • c
    no doubt. i will remember to stay out of that soup once i've got my mental model straight. thank you for explaining things. it helps.
  • h
    I've been using hx-boost on the body and it works pretty well
  • b
    Yeah, so I was building out a wizard that was supposed to guide the user through a process of a few steps. I ended up doing it purely in htmx and it worked but honestly was kinda hacky (I'm still learning htmx and not a front end developer though so this was probably me). Alpine js would've been so much better for this one thing
  • h
    You have to remember to set push-url on the body as well, and turn it off for forms
  • h
    I really like alpine so far
1...121314...100Latest