Saturday, 19 June 2021

htmx: onLoad: "on full page load" and "on after swap"

I would like to initialize a select element like in the tom-select Example with my own method:

<select id="select-repo" placeholder="Pick a repository..." multiple></select>
function my_select_init(el) {
  new TomSelect(el, {
    persist: false,
    createOnBlur: true,
    create: true
  })
}

There two different ways:

Case 1: The full page gets loaded

In this case you can use one of the modern onLoad methods.

For example:

document.addEventListener('DOMContentLoaded', function () {
  // do something here ...
}, false);

Case 2: the fragment get inserted into the DOM via htmx

How to initialize the snippet?

Preferred solution

I want the HTML and the on-load code to be in one place (Locality of Behaviour) and I want this html fragment to be the same for both cases.

Up to now I don't use Hyperscript or Alpine.js, but I am open to use one of these libraries, if this makes the solution simpler.



from htmx: onLoad: "on full page load" and "on after swap"

No comments:

Post a Comment