https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • b
    thx very much for all. I'am trying do this:
    Copy code
    <a hx-post="{% url 'index' %}" HX-Trigger-Name="click">Click Me!<input type="hidden" name="click"></a>
    and I have an error 403 in console. What i'am doing wrong?
  • p
    you need to include the csrf token
  • p
    I usually add this to my attribute:
  • p
    Copy code
    html
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
  • b
    Is it worth pinning a message about the middleware in here? I don't think I have permissions for that though.
  • f
    This channel is already named after the middleware package.
  • b
    Yeah but I’ve pointed people to it several times so maybe it’s not obvious. I mean, it’s obvious once you know that there is a middleware…
  • b
    After adding csrf I have now 405 method not allowed error
  • b
    Plus there’s also a go-htmx channel and various others so it’s no longer a easy assumption to make
  • f
  • f
    Yeah; you've got a valid point. Just don't like how pinned messaged look 😛
  • b
    Can you show me some example of how to use it correctly? Because I think I'm doing it incorrectly. I tries to use HX-Trigger-Name.
  • p
    Have you checked what headers you have in your request?
  • c
    Hi guys, I am reaching to see if anyone has experience with 
    importlib.reload
    ? I have tried to setup an example of allowing creation of dynamic apps using metadata stored in a database. I can load a dynamic app and it will render fine. If I make a change in the database, I perform an 
    importlib.reload(<module_name>)
    and I can see the new UI changes from the metadata. However, if I make another change and execute the same 
    reload
    the previous version is still shown. I am not sure why it works for the first iteration but any subsequent call doesn't seem to update....Just curious if anyone has done this?
  • n
    I have a Django listview and at the top I have a form with inputs that can be used for filtering the list, using django-filter. You can set one or more filters (e.g. filter by color and by shape) and click Submit, and the form would issue GET to the current URL with a query param, e.g. 
    url?color=red
    , and if you changed the color filter and Submit, the URL becomes 
    url?color=blue
    . I was pretty thrilled how easy it was to use HTMX to make the select buttons work immediately, without Submit, as illustrated below. However, multiple color changes lead to a goofy URL: 
    url?color=red&color=blue
    . Is there a better approach? I tried hx-params to no avail.
    Copy code
    <form>
    <label class="label">Color</label>
    <div class="control">
        <div class="select">
            <select name="color" hx-push-url="true" hx-target="body" hx-get="" hx-trigger="change" id="id_color">
                <option value="red" selected="">Red</option>
                <option value="yellow">Yellow</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
            </select>
        </div>
    </div>

    <label class="label">Shape</label>
    <div class="control">
        <div class="select">
            <select name="shape" hx-push-url="true" hx-target="body" hx-get="" hx-trigger="change" id="id_shape">
                <option value="square" selected="">Square</option>
                <option value="circle">Circle</option>
                <option value="triangle">Triangle</option>
            </select>
        </div>
    </div>
</form>
  • b
    Instead of a just sending to the current URL, I would specify the URL explicitly in the hx-get. 
    hx-get=“url?color=red”
    then that will be the URL that is pushed.
  • n
    The filters are supposed to be additive. You can select both color and shape, and without htmx you get a nice 
    url?color=red&shape=circle
    . With htmx it works but whatever you reselect gets repeated.
  • b
    If you pull the htmx attributes up to a parent element then it will send them both each time:
    Copy code
    html
<form hx-get="/url" hx-push-url="true" hx-swap="none" hx-trigger="change">
    <select name="color" id="">
      <option value="red">red</option>
      <option value="blue">blue</option>
      <option value="green">green</option>
    </select>

    <select name="shape" id="">
      <option value="square">square</option>
      <option value="circle">circle</option>
      <option value="triangle">triangle</option>
    </select>
  </form>
  • n
    It's nice to pull the attributes up. However, I still see my query params getting repeated if I make repeat selections. (NB: You show hx-swap="none" but I need to swap, so I have hx-target="body" and no hx-swap)
  • b
    make sure to change the hx-get to be the actual url you want to go to - if you leave it empty then you will see the repeated parameters
  • n
    ah
  • n
    In the version before I pulled the attributes up, my form also has in it, and I put hx-trigger="keyup delay:500ms changed"> on those inputs and that works. If I pull the attributes up to the form I can't get as-you-type changes to work. Is there a solution to that, or should I just go back to htmx on each input element?
  • b
    And when you type you want all the values in the form to send?
  • n
    yep
  • b
    there may be better ways of doing it but this works:
    Copy code
    html
<form hx-get="/test" hx-push-url="true" hx-trigger="change" hx-swap="none">
    <select name="color" id="">
      <option value="red">red</option>
      <option value="blue">blue</option>
      <option value="green">green</option>
    </select>

    <select name="shape" id="">
      <option value="square">square</option>
      <option value="circle">circle</option>
      <option value="triangle">triangle</option>
    </select>

    <input type="text" hx-get="/test" name="search" hx-trigger="keyup delay:500ms changed" hx-include="[name='shape'],[name='color']">
  </form>
  • n
    OK, treat the input as its own (non-pulled) case
  • b
    ya but it will still be included in the form when you change one of the other fields
  • n
    understood
  • n
    In the non-htmx case this works perfectly with the form without all this extra. I wonder if htmx could be enhanced to be more transparently compatible. I don't think repeated query-params are the right behavior in any case...
  • n
    Appreciate the help...!
1...424344...100Latest