https://htmx.org logo
Powered by
# htmx-general
  • c
    I also tried something like this
    Copy code
    <td style="text-align:center;"> 9
            <span id="newqt-2125">XXX</span>
            </td>


            <td style="text-align:center;">

            </td>


            <td style="text-align:center; font-weight: bold;">A-M-12</td>


            <td style="text-align:center;">
               <!-- <a href="/substract_qty/2125/1/8960-1"> <input type="button" value="Remove 1 parts"></a> -->
            <button id="btn-2125" hx-get="/substract_qtyx" 
                hx-swap="None"  <------------------------------------- I WANT TO THIS ON THE BUTTON
                hx-swap-oob="outerHTML#newqt-2125" <--------------------------------- AND WANT TO DO THIS TOO
                hx-target="#btn-2125" 
                hx-vals='{ "inv_id": "2125","removeqty": "1" }'>
                Remove 1 parts
            </button>
            </td>
  • c
    To make it super easy for you to help me
    Copy code
    <span id="newqtX">XXX</span>
.........................
.... Lot of html code ...
.........................
<button id="btnX" hx-get="/substract_qtyx"> Remove the button after click and update XXX to GGG </button>
    I believe I'm missing the correct answer. (FYI in reality, there is a lot of data between the and the
  • h
    you don't put swap-oob on the button that's triggering the request, you put it on the response element that you want swapped in
  • h
  • h
    make sure in your response: "Out of band elements must be in the top level of the response, and not children of the top level elements."
  • c
    I believe I have it working, will post soon
  • c
    Here is what I came up with
    Copy code
    <td style="text-align:center;"> {{ part.oriqty.data }}<br>
            <span id="newqt-{{part.invid.data}}"></span>
            </td>

            <button id="btn-{{part.invid.data}}" hx-get="{{ url_for('substract_qtyx') }}" 
                hx-swap="delete" 
                hx-vals='{ "inv_id": "{{part.invid.data}}","oriqty": "{{part.oriqty.data}}","removeqty": "{{part.qty.data}}" }'>
                Remove {{part.qty.data}} parts
            </button>
    and my return is:
    Copy code
    @app.route('/substract_qtyx', methods=['GET', 'POST'])
@login_required
def substract_qtyx():
  return "<span style='color:red;' hx-swap-oob='outerHTML:#newqt-2125'>8</span>"
  • c
    Hi everyone, I have a SELECT element that I want to pass the value of the SELECT as part of the 
    hx-get
    path. Is this possible? This is to allow for me to have a dynamic cascading select.
  • c
    e.g.
    Copy code
    hx-get='/select-options/entity/{"entity_name": "customer"}'
  • c
    Can I make the 
    customer
    be the value of the SELECT from which the change event triggers the 
    hx-get
    ?
  • e
    So you want to nest a 
    hx-get
    basically? @User
  • e
    So use the result of one hx-get in the other?
  • c
    Not sure about the nesting part, I just want to have a dynamic part of the 
    hx-get
    so that it contains whatever value from the select....
  • e
    Oh I see.
  • e
    I think hyperscript will help here, but I could be wrong. As far as I know the value of 
    htmx
    attributes can't be dynamic.
  • c
    Copy code
    <select id="entity"
  hx-trigger="change"
  hx-get='/select-options/model_field/{"model_name": "me.value"}'
  hx-target="entity-list"
...></select>
...
<select id="entity-list"
  <option ..>COMES FROM THE CHANGE EVENT ABOVE</option>
</select>
  • c
    Yeah, I was hoping that there was some syntactic sugar that HTMX provided to pass in the value to the URL of the 
    hx-get
  • e
    Wait the URL you have: 
    /select-options/model_field/{"model_name": "me.value"}
    . Why is there JSON? Are you trying to attach a request body? Or does your backend accept that format?
  • c
    I have a custom backend that allows for that format
  • e
    Oh okay.
  • e
    I would say check this attribute out: https://htmx.org/attributes/hx-vals/
  • e
    This looks like it is applicable to your situation @User
  • c
    Sweet! Thanks @User for pointing this out.....Will give it a try.....
  • m
    If your 
    select
    element is given a 
    name
    attribute, htmx will automatically provide the key-val map along with the 
    hx-get
    request—the URL would just look like this, instead: 
    select-options/entity?entity_name=customer
  • m
    I've never seen JSON as part of the path… is this a requirement, or something that is supported?
  • c
    It isn’t in a form. But thanks for the tip
  • m
    I don't think it needs to be!
  • m
  • c
    Thanks for the demo!
  • b
    I have a table with products, where I wanted to build something like "inline edit" mostly without using JS.
    Copy code
    html
<tr id="editProductRow"
    hx-target="#editProductRow"
    hx-encoding="multipart/form-data"
    hx-swap="outerHTML"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-include="#editProductRow"
    hx-trigger="target:#submitbutton">
    <many tds with different strings in them and some hidden ones with b64 images>

    <!-- post the update -->
    <td>
        <img id="submitbutton"
             type="submit"
             hx-post="{% url 'update' object.pk %}?page={{ page }}"
             hx-trigger="click[showEditButtons()]"
             src="{% static 'save.svg' %}">
    </td>
</tr>
    everything works in testing, but in deployment I got errors. So I checked the URLs from for example 
    {% url 'update-cancel' object.pk %}?page={{ page }}
    which I would expect to look something like this: 
    http://127.0.0.1:8003/productupdatecancel/140?page=1
    but I can see under "headers" in the network tab of the webdev console it looks like this: 
    http://127.0.0.1:8003/productupdatecancel/140?page=1&number=3&name=testproduct&price=4.2&img_hidden=logo.png___data%3Abase64encodedimagestringhere........
    I suspect the hx-include makes my attributes end up in the header instead of the request body. How can I fix this?
1...632633634...1146Latest