I'm having trouble with morphing (tried both idiomorph and mordphdom). On first request, my endpoint returns

<div class="dc-content" hx-get="/endpoint" hx-trigger="every 1s" hx-swap="morphdom">
  <div id="dc-session-details">test</div>
</div>

On each subsequent request

/endpoint

will just return the inner div:

<div id="dc-session-details">test</div>

However, attempting to mark/highlight the text "test" with the mouse doesn't work, because it is replaced on every second. Looking at the DOM with the browser's webdev tools also looks like the inner div is replaced each time. Is that the intended behaviour? My expectation was that only content that differs is swapped/morphed, but maybe I just didn't get the idea behind morphing.

hello people,

**htmx.onLoad(function() **

doubling on every load to dom. as you see on screenshot down bellow I have a problem with the following code.

unSetClasses

>

htmx.onLoad(function(elt))

with the form reload after the form is reloaded and the #product_update_close button works. otherwise the button works once and does not work when the form is reloaded ajax (when i clicked to update button). However, every time I open and close the form,

htmx.onLoad(function(elt)

increases by one, that is, it stays in the dom even though the form is closed. when I click again, it does the same thing twice, three times when I click again.

(function(){
    function setClasses(evt) {
      let active_row = evt.detail.elt.offsetParent
      active_row.classList.add("active-row");
      htmx.addClass(htmx.find('body'), 'update-On');
    }

    function setAfterSettle(evt) {
      htmx.on("htmx:afterSettle", function (evt) {
        setActiveRowIndex()
      });
    }

    function unSetClasses(evt) {
      htmx.onLoad(function() {
        htmx.on("#product_update_close", "click", function() {
          htmx.removeClass(htmx.find('body'), 'update-On');
          htmx.removeClass(htmx.find('.active-row'), 'active-row');
          htmx.remove(htmx.find("#product_form_container"), 600);
        });
        console.log('Log htmx.onLoad')
      })
    }

    htmx.defineExtension('set-update', {
      onEvent : function(name, evt) {
          if (name === "htmx:afterRequest") {
            setClasses(evt);
            setAfterSettle(evt);
            unSetClasses(evt);
          }
      }
    });
})();

That is because you add this listener on every "htmx:afterRequest". And since htmx.onLoad is global (it does not accept target element), yes, it stays on the page

It seems like you try to implement some sort of editable state, perhaps with modals/popups. There are 4 examples of this on htmx examples page https://htmx.org/examples/

thank you ren, I solved it with hyperscript.

I have an img on which I used to modify its src with javascript. Now htmx updates it, and I think it deletes the entire element and puts a new img in, causing the contents of the page below it to jump up and then pop down again. Am I on the right track in thinking some kind of morph swap can modify the src on the existing element and restore the old smoother update?

yes

Okay thanks.

1 point for every super villain reference

Pulling my hair out over here- is there a good way to debug a condition where HTMX just isn't seeing SSEs? I've copied + pasted the div listed under Usage here https://htmx.org/extensions/server-sent-events/ and it's just doing nothing. The only edit I've made is the URL, which on my server is /events/. I can go to /events/ and see the SSEs come in when I send them, but I just don't understand what's going on with the HTMX side of things.

Possibly a stupid question but just checking you're doing

htmx.logAll();

?

did you include extension script?

Include the what?

that could be my problem...

right

Ima make a pull request, because this problem arises way to often in this chat

in the mean time

There is a link to the extension script at the bottom of the page

include it in a script tag after htmx script

ah

I get it

I was wondering if there was something like that, hence my coming to this chat, but didn't think to look aaaaalllll the way at the bottom

yes, for most extension it's visible, since their description is short enough

there is also techincally this bit https://htmx.org/extensions/#installing, but it's not easy to find

And crucially for my application, it appears nowhere between clicking on "SSE and WebSockets", which directs one to the extension, and then code which should work

Seems to me that it would be prudent to have a console error when loading an extension for which the script hasn't been loaded

But I'm emphatically not a JS developer so you will not see me writing it

Here’s one for the experts: I have a follow/unfollow button which, depending on a (Django) template variable (context), has a different hx-props. On click, it re-renders itself (outerHTML). Is there a way to make this button reusable in terms of appearance m as in: being able to design its width, inner contents, etc?