Question regarding img src replacement #3202
Comments
Unless I misunderstood, your first image is precisely not htmx powered ; you define a I think what you would want to do in your situation is to replace your first image's markup by the following: <img
id="navbar-avatar"
src="/profile/photo"
alt="Avatar"
class="navbar-avatar"
hx-get="/profile/photo"
hx-credentials="include"
hx-trigger="profilePhotoUpdated from:body"
hx-on::after-request="event.detail.target.src=event.detail.xhr.responseText"
hx-swap="none"
hx-target="this"
/>(I simply added all htmx attributes from your second image, to the first.) Hope this helps! |
You got that right, as it is now it has nothing to do with HTMX. What I wanted to say was: If I put the same second construct (residing in a form) into the navbar "as is" (so with HTMX) support, then there in the navbar is no reaction to the trigger.
And this exactly is not what I could make work. The profilePhotoUpdated never arrived there. But a document.body event hander for this sees it, so that I'm now using JS to do the src exchange. Sorry for not being specific enough. I of course would love to have nearly identical constructs in form and navbar and no need to use JS at all. |
|
Oh I see, sorry for misunderstanding that you had already tried that.
Hope this helps! |
|
OK, the form: Form in Browser: 
Page source code as seen by the browser: I will do the tests later the day. Thanks |
|
OK, I now completely removed the form image tag to not see any interferences, and set the navbar image to what didn't work for me and what you are suggesting. I also removed the little helper script I was using up to now. The only active img tag is this now in the navbar: After a complete page refresh I see the proper avatar in the navbar. Examining the element itself looks OK: Then I set the trigger in the dev console and indeed - you are right - it made the image to fetch something. So the trigger arrives, even in the navbar Tshark does see this: It clearly looks as to be coming from the navbar as hx-get. After this the browser display of the navbar avatar is broken, most likely because this is now the examination result of the image: The entire image content has been put into the src attr as like a string, so that the browser immediately fetches this nonsense as URL, which fails. 
So something happens, but it is the wrong. |
|
Oh, this one seems to work: I'm using the triggers load and reception of the update notification to trigger an XHR fetch of the image just to use the after request to replace the src tag with a cache busting URL to enforce a new fetch. This ends up in at least two fetches, but works fine. That also works in the form. No extra js needed. Thanks |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm having this image in my NavBar
Then there is a form which deals with Avatar images and allows for upload and deletion. With this code it is possible to enforce a replacement of the src attr on change in the Backend (which is gohtml driven):
Once the backend updates the Imagery it fires a HX-Trigger to the body and the latter element reloads the image. Not so the first. This one is completely unimpressed by the trigger, even though the trigger arrives for body. The event arrives, but I'm only possible to replace the image in the NavBar by re-fetching it like so. The same code as applied for the form doesn't do anything in the NavBar because the profilePhotoUpdate trigger doesn't arrive. The NavBar is embedding the form.
I would like to get rid of the required JS
The text was updated successfully, but these errors were encountered: