search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
37.88k stars 1.28k forks source link

Extend targets at the server side #2378

Open AdilDalli opened 7 months ago

AdilDalli commented 7 months ago

Required Feature

Currently we are using events to deal with this scenario, but that results in a number of GETs that can be avoided if we use the reuturned HTMX to updated the HAS-TO-BE-UPDATED elements.

Scenario User: connect to the server to login System: returns an HTML view rendered. (see the attached file) User:enters some text on the first firstName System:Automatically updates the other fields based on the entered value.

Current Approach when the user enters some text in the firstName name text field, the element sends a post request to the server. The server then processes the request and generates the html response. in the header of the response, the event names respective to each to-be-updated element. HTMX sends GETs request based on the configuration.


        <body>
            <div id="app" hx-trigger="851441631779703922 from:body" hx-get="/test/get">
                <div id="3008070423192551709" hx-trigger="3008070423192551709 from:body" hx-get="/test/get">
                    <span id="6304553163039292427">
                        WHWHWH Name
                    </span>
                    <div id="4579002742808361052" hx-trigger="firstName from:body" hx-target="this" hx-swap="outerHTML" hx-get="/test/get">
                        <input id="firstName" type="text" name="whwhwh_name" hx-trigger="change" hx-post="/test/post">
                        </input>
                        <small id="1071082011645688655" class="">

                        </small>
                    </div>
                </div>
                <div id="8068734308795202596" hx-trigger="8068734308795202596 from:body" hx-get="/test/get">
                    <span id="5304247147898556059">
                        Last Name
                    </span>
                    <div id="7509559373127698338" hx-trigger="lastName from:body" hx-target="this" hx-swap="outerHTML" hx-get="/test/get">
                        <input id="lastName" type="text" name="last_name" hx-trigger="change" hx-post="/test/post">
                        </input>
                        <small id="3966973053309203949" class="">

                        </small>
                    </div>
                </div>
                <div id="3887303841694697732" hx-trigger="3887303841694697732 from:body" hx-get="/test/get">
                    <span id="5530447034097775678">
                        Password
                    </span>
                    <div id="8278330100810625691" hx-trigger="password from:body" hx-target="this" hx-swap="outerHTML" hx-get="/test/get">
                        <input id="password" type="password" name="password" hx-trigger="change" hx-post="/test/post">
                        </input>
                        <small id="8302587430978339379" class="">

                        </small>
                    </div>
                </div>
                <div id="1757182563773599677" hx-trigger="1757182563773599677 from:body" hx-get="/test/get">
                    <span id="5695210449541873800">
                        Date Of Birth
                    </span>
                    <div id="7738599768048712211" hx-trigger="dateOfBirth from:body" hx-target="this" hx-swap="outerHTML" hx-get="/test/get">
                        <input id="dateOfBirth" type="date" name="date_of_birth" hx-trigger="change" hx-post="/test/post">
                        </input>
                        <small id="6441573798654685371" class="">

                        </small>
                    </div>
                </div>
                <div id="4729192521650752308" hx-trigger="4729192521650752308 from:body" hx-get="/test/get">
                    <span id="6304418498276707061">
                        Text Area Test
                    </span>
                    <div id="2034755475236341605" hx-trigger="test from:body" hx-target="this" hx-swap="outerHTML" hx-get="/test/get">
                        <textarea id="test" name="text_area_test" hx-trigger="change" hx-post="/test/post"></textarea>
                        <small id="1967672059459357360" class="">

                        </small>
                    </div>
                </div>
                <button id="2869118310281164691" title="save" name="save" hx-trigger="click" hx-swap="none" hx-target="this" class="btn btn-outline-primary" hx-post="/test/post">
                    Save
                </button>
                <button id="1357799804300512493" title="cancel" name="cancel" hx-trigger="click" hx-swap="none" hx-target="this" class="btn btn-outline-primary" hx-post="/test/post">
                    Cancel
                </button>
            </div>
        </body>

.

The context

We are working on a components kit in java.

guidog commented 7 months ago

So what? Is this a request, a question or just something to keep the electrons busy?

andryyy commented 7 months ago

I don’t really get it, I’m afraid, but it looks like a job for Batman HX-Retarget and/or -Reswap.

andryyy commented 7 months ago

Oh, perhaps hx-select on the hx element is more what you need. It would cherry-pick an ID to swap. Then there’s multiselect as extension to extend hx-select's brain mass. And it’s free,99.

AdilDalli commented 7 months ago

So what? Is this a request, a question or just something to keep the electrons busy?

It's a request for a feature that is taking shape in my mind like magic.

AdilDalli commented 7 months ago

Oh, perhaps hx-select on the hx element is more what you need. It would cherry-pick an ID to swap. Then there’s multiselect as extension to extend hx-select's brain mass. And it’s free,99.

You are in the right direction. Currenly HTMX, which is in the client, needs to know which ids to swap before getting the response from the ouside (server). I want a way to tell HTMX which ids to swap based on the header (for example) of the response. We currently trigger events based in the response. but this results in a number of GETs. If we have such a feature in HTMX we would sends only one request, render the html elements in the server, and pack them to the client where HTMX will handle the swapping. prior to sending the request we might not know which elements to swap after the response.

andryyy commented 7 months ago

I think that’s possible with the HX-Reswap response header then.

But I don’t know if you'd like it. The full document will be downloaded and processed. It may look smooth, but there’s still that full payload to carry and select from.

If that’s the way you want it, idiomorph (also bigskysoftware) used as extension might be the better choice.

AdilDalli commented 7 months ago

This is not what I am aiming. The rendered html will be provided by the server and it's up to HTMX to place/swap the right element according to the configuration (in the very HMTL response).

I am digging a little bit into the swap mechanism to understand how to pass the elements ids before swapping.