Misc HTMX Pattern.md

Misc HTMX Pattern.md

Just things I find, but not need right now #htmx

Trigger Third Party Behavior

bigskysoftware/htmx#1158 (comment)

htmx.onLoad(function (content) {
	content.querySelectorAll('[data-dismiss-target]').forEach(triggerEl => {
		const targetEl = document.querySelector(triggerEl.getAttribute('data-dismiss-target'))

		new Dismiss(targetEl, {
			triggerEl
		})
	})
})

Error Handling

https://discord.com/channels/725789699527933952/725789747212976259/1085237208153346108

HTMX is not particularly opinionated on error handling (which I think is something that it would be nice to build on, over time) but the way I've handled it is by including a small config file in my head template, right below where I import HTMX

document.addEventListener('DOMContentLoaded', function () {
  document.body.addEventListener('htmx:beforeSwap', function (evt) {
    const status = evt.detail.xhr.status
    if (status === 400 || status === 500) {
      // Stops the error from logging in the console
      evt.detail.isError = false

      // Create an error dialog box
      const errorDialog = document.createElement('div')
      errorDialog.classList.add('error-message')
      errorDialog.innerText = evt.detail.serverResponse
      errorDialog.setAttribute('onclick', 'this.remove()')

      // Get the nav and place the element after it
      const nav = document.querySelector('.site-nav')
      nav.insertAdjacentElement('afterend', errorDialog)
      errorDialog.scrollIntoView()
    }
  })
})

I think I adapted this from the documentation somewhere. There's some room for improvement (what if it errors twice?) but it's one basic way to hook in

Progressbar with NProgress

htmx.on("htmx:beforeSend", function(evt){
  NProgress.configure({ trickleSpeed: 100 });
  NProgress.start();
  NProgress.set(0.4);
});

htmx.on("htmx:afterOnLoad", function(evt){
  NProgress.done();
});

Inheritance

The hx-disinherit attribute allows to control automatic attribute inheritance. -- hx-disinherit Attribute

<div hx-boost="true" hx-select="#content" hx-target="#content" hx-disinherit="*">
  <a href="/page1">Go To Page 1</a> <!-- boosted with the attribute settings above -->
  <a href="/page2" hx-boost="unset">Go To Page 1</a> <!-- not boosted -->
  <button hx-get="/test" hx-target="this"></button> <!-- hx-select is not inherited -->
</div>