build an alternative front end framework they said

it'll be great they said

but server side is the only place the header is read, so what makes sense to it should define it's name. imho 😉

OK folks, I finally have some time to shudder work on the backlog for htmx. hmu if there are specific things you want me to look at

Is there a recommended way to simply remove a DOM element? I used

hx-get

with

hx-push-url

to open a modal window and update the location bar (brilliant!). But now I'm struggling with how the "cancel" link should dismiss the window and re-update the location bar. Is this within the scope of HTMX or do I need to kick out to some regular old JS for this?

Sounds front-end scripty if you don't want to make a server request.

Yep, that's what I thought. Still trying to grok the new (old) paradigm. 😜

I don't know if it's "recommended", but what I did was return a custom header in the response that clicked the cancel button programmatically. (My responses also used the

HX-Push

response header to update the URL.) These were Bootstrap modals; I described how I did it at https://blog.bitbadger.solutions/2021/a-tour-of-myprayerjournal-v3/bootstrap-integration.html#Modal-Dialogs .

@mysterious-toddler-20573 w/r/t https://github.com/bigskysoftware/htmx/pull/837 - it's a styleguide enforcer

You add the linters you want to enforce in the .precommit.yaml (prettier for js? markdown for docs?) and there's a free bot that will check the code against the linters and pass/fail the build

I set up an example at https://github.com/gone/htmx/pull/1 w/ under the checks

EG that build passed because there's no enforcement rules

Thanks. That tip may come in handy.

Even though it doesn't involve the server (so it makes sense that it would be outside HTMX's scope), it does feel a bit weird that HTMX can load stuff into a DOM element, but can't remove it. It would be great we had

hx-remove

to simply remove a DOM element with the

hx-trigger

event.

hyperscript replaced that functionality

😑

basically I got mad that I had to remove ;'s my editor added

Hello boyz and girlz I have this beautiful buttom

<button hx-get="{{ url_for('substract_qtyx') }}" 
                hx-target="#newqt-{{part.invid.data}}" 

                hx-vals='{ "inv_id": "{{part.invid.data}}","removeqty": "{{part.qty.data}}" }'>
                Remove {{part.qty.data}} parts
            </button>

as you see it is going to update the #newqt-XXXX with a value, but while it is doing it, is there a way to make the button itself dissapear ? of course if I do this:

<button hx-get="{{ url_for('substract_qtyx') }}" 
                hx-swap="delete" 
                hx-vals='{ "inv_id": "{{part.invid.data}}","removeqty": "{{part.qty.data}}" }'>
                Remove {{part.qty.data}} parts
            </button>

The button will go away, but the hx-target="#newqt-{{part.invid.data}}" will not be replaced. There is a way to do both at once ?

I tried already

<button hx-get="{{ url_for('substract_qtyx') }}" 
                hx-swap="outerHTML" 
                hx-target="#newqt-{{part.invid.data}}" 
                hx-swap-oob="true"
                hx-vals='{ "inv_id": "{{part.invid.data}}","removeqty": "{{part.qty.data}}" }'>
                Remove {{part.qty.data}} parts
            </button>

It needs to be on the returned content

not on the button

Hmm I'm not sure I understand, my Python function is

@app.route('/substract_qtyx', methods=['GET', 'POST'])
@login_required
def substract_qtyx():

    inv_id = request.args.get("inv_id")
    removeqty = request.args.get("removeqty")

    print(f"{removeqty}")

    return 'hx-swap-oob="true"'

and of course when I do this the content on the hx-target="#newqt-{{part.invid.data}}" is replaced with this exact text !

When I click on the remove button the XXX is replace by ByeBye, definitely what I want, but I want the 'Remove ## parts' that I clicked to go away too

@careful-waiter-81326 give the button an id, and then include an oob that replaces it with like

@hundreds-camera-24900 I tried but still fails

the behavior is always the same, the XXX gets replaced by ByeBye, or the button gets replace by ByeBye. But I cannot figure out how to make the btn go away, and the XXX replaced by ByeBye at the same time

here is my 'update' code:

<td style="text-align:center;"> 9
            <span id="newqt-2125">XXX</span>
            </td>

<td style="text-align:center;">
            <button id="btn-2125" hx-get="/substract_qtyx" 
                hx-swap="outerHTML" 
                hx-swap-oob="true"
                hx-target="#btn-2125" <---------------------------- HERE I TARGET the #btn-2125 or the #newqt-2125
                hx-vals='{ "inv_id": "2125","removeqty": "1" }'>
                Remove 1 parts
            </button>
            </td>

and my python

@app.route('/substract_qtyx', methods=['GET', 'POST'])
@login_required
def substract_qtyx():

    inv_id = request.args.get("inv_id")
    removeqty = request.args.get("removeqty")

    print(inv_id)
    print(inv_id)

    return '<span></span>'