yeah... interesting. I suppose we can target a

.class

with htmx, so it's not quite the same as OOB

(fwiw, in rails I toggle layouts with a request wrapper, rather than directly in the templates, when handling boosted links)

Almost a React style "these are the bits that need swapping out"

I suppose it's a bit of a mix as well - if you have a "standard" layout with header, side bar etc, and then the main container content, you'd probably have multiple templates for the different pages that fill up the content container, and then each of them would have fragments as needed.

i.e. Not every template needs all of the HTML.

That https://enhance.dev/ is interesting though - you just create pieces of html in a file and they appear as routes.

and I feel like they're interested in some first-class htmx support (@mysterious-toddler-20573 👀 ) https://twitter.com/brianleroux/status/1565103292702916609

Not sure if that counts as a different approach to doing something similar. Could you have all of the fragments under the same folder and then is your "template" just the folder contents. e.g. it's a IDE presentational issue - if you have them all in split windows then do you have "Visual Locality of Behaviour"? 😄

I would pay to eavesdrop on that zoom call 😅

Good point. Will give this some more thought.

yep, I DM'd him, always happy to chat w/ folks

Hey sy, I use gridstack and HTMX together successfully... Are you essentially saying that gridstack events are not wired up to that widget created in the

.addWidget()

call? Here is what I do. I have a hidden DIV as the HTMX Target, then I do this:

let container = htmx.find('#newWidgetTargetContainer');
            let widgetelement = container.firstElementChild.cloneNode(true);
            container.firstElementChild.remove();
            let grid = document.querySelector('.grid-stack').gridstack;
            grid.addWidget(widgetelement);
            htmx.process(widgetelement);

Ah!!! htmx.process is what I wanted

thank you!!

is there any advantage to htmx.find over document. stuff?

I personally htmx swap it to an invisible div then add the innerHTML to the widget, then remove the invisible element

seems like essentially the same thing. in your case perhaps you may have some thin wrapper around your actual gridstackItem content. in my case, that

widgetelement

is the entire gridstackItem, not just the innerHTML ... again, basically same thing

awesome

I do need to clone it if I want an element to run process on though

though I could find the new element in the grid then do it

I use clone to make sure it is a true DOM element being added, not just a segment of HTML

hm your way sounds better

Do you do something to eval scripts in the included widget properly?

I do not... I have a little sprinkle of Alpine in each widget, but when added and processed, that all "just works" (tm)

Hmm, didn't work for me, so I had to do this:

document.addEventListener('load-widget', function(event) {
      grid.removeWidget("drilldown-widget-results");

      let container = htmx.find('#drilldown-widget');
      var scripts = htmx.findAll(container, "script");
      let widgetelement = container.firstElementChild.cloneNode(true);
      container.firstElementChild.remove();
      //let grid = document.querySelector('.grid-stack').gridstack;
      grid.addWidget(widgetelement);

      htmx.process(widgetelement);
      for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
      }
    });

and in the widget:

var widget_event = new Event('load-widget');
  document.dispatchEvent(widget_event);

events avoid a race condition between the widget being loaded on initial load before the grid is loaded

since the same widget is included for both

(first page load and when the user clicks the search button)

do you happen to have a handy snippet for replacing a widget while keeping the size?