How can I reload material.min.js

[NetheriteTree]

The material.min.js can't work after clicking a htmx link This is my sittings:

    htmx.on("load.htmx", function(evt) {
        gtag();
    md();
    main_js();
    })

This is the material.min.js:

function md(){"use strict";function e(e //......
//...
md();

And other javascripts work perfectly

[1cg]

first things first: can you put a console.log in there to see if the event is firing properly?

[NetheriteTree]

no errors it seems it is not firing properly

[1cg]

Looking at https://material-ui.com/, i think you are gonna have a pretty bad time with htmx.

htmx assumes there is a stable DOM to process at the end of a request. If you are slamming the DOM around with dynamically updating content, it won't add the right event handlers to the newly added content.

And I bet material-ui assumes it is loaded once and only once for an app.

This just seems like a painful direction to go to me.

[NetheriteTree]

Looking at https://material-ui.com/, i think you are gonna have a pretty bad time with htmx.

htmx assumes there is a stable DOM to process at the end of a request. If you are slamming the DOM around with dynamically updating content, it won't add the right event handlers to the newly added content.

And I bet material-ui assumes it is loaded once and only once for an app.

This just seems like a painful direction to go to me.

But I am not using this one, I use https://getmdl.io/ which provided by Google

[1cg]

Ah, OK. Looking at that, it looks like you need to call

  componentHandler.upgradeElement(button);

on every element added to the DOM. This is probably best done with an extension that catches the processedNode.htmx event and calls the above code on the element (maybe with a test for an mdl class?)

You can use the remove-me extension as a template:

https://htmx.org/extensions/remove-me/