-
|
I created a javascript function for add a import htmx from 'htmx.org';
window.htmx = htmx;
function copyCodeButton () {
const copyButtonLabel = "Copy Code";
// use a class selector if available
let blocks = document.querySelectorAll("pre.b");
blocks.forEach((block) => {
// only add button if browser supports Clipboard API
if (navigator.clipboard) {
let button = document.createElement("button");
button.className = "copyBtn";
button.innerText = copyButtonLabel;
block.prepend(button);
button.addEventListener("click", async () => {
await copyCode(block, button);
});
}
});
async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
button.innerText = "Code Copied";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 1500);
}
}
function init () {
copyCodeButton();
}
htmx.onLoad(init);it works if not enable
But, when use mouse click same page again(hx-boost enabled), i get 3 duplicate buttons (even current page only one <pre> tag exists), as show in following screenshot.
Any idea for how to fixed that? Thanks in advance! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
Hey, I see your buttons don't have a Could you try adding |
Beta Was this translation helpful? Give feedback.
-
|
Done, now the JS generated button tag like following: <button class="copyBtn" type="button">Copy Code</button>still get same behavior when visit a link to current page use htmx.
to be clarify, the duplicate button happen when visit same page again use mouse click a link (with hx-boost enabled), not click on the button, e.g. current page is:
Thanks |
Beta Was this translation helpful? Give feedback.
-
|
Hi, i saw
Is it that I misused this hook? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, @Telroshan I fixed my code with check the button existence before append the button to workaround the if (navigator.clipboard) {
let button = block.querySelector("button.copyBtn");
if (button === null) {
button = document.createElement("button");
button.className = "copyBtn";
button.innerText = copyButtonLabel;
button.addEventListener("click", async () => {
await copyCode(block, button);
});
block.prepend(button);
}
}However, I am still curious why the |
Beta Was this translation helpful? Give feedback.
-
|
Oh right,
So for each node added by htmx in the DOM, including during the page's lifetime, your function would execute and instanciate a new button. It seems you're not using any htmx feature in your JS code though, so you might even want to consider not relying on any htmx event here and use a standard Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
So, this stand for
This hack seem like works for me.
Yes, but I will, for now, I only enable hx-boost in the tag, but |
Beta Was this translation helpful? Give feedback.
-
|
Hi, one more question, I notice there are three child node under the body element (as you can see in the following screenshot)
those nodes exactly the output of EDIT: I try the if (event.detail.elt.nodeName == "BODY") {
copyCodeButton();
}but same as Thanks |
Beta Was this translation helpful? Give feedback.
-
As I understand it (didn't test it to confirm), htmx will fire
Now that I've seen your console logs, indeed that won't work as
So, I would suggest:
function setupBlock(blockElt) {
// Your button creation code
...
}}
// Set up blocks on the initial page load
document.addEventListener("DOMContentLoaded", function() {
let blocks = document.querySelectorAll("pre.b");
blocks.forEach(setupBlock)
})
// Set up any newly added block (hx-boosted navigations or hx-get/hx-post/etc. swaps)
document.body.addEventListener("htmx:afterSwap", function (event) {
let blocks = event.detail.elt.querySelectorAll("pre.b");
blocks.forEach(setupBlock)
// If it's possible that a block is at the top level of the response, you'll want to check the root elt itself
if (event.detail.elt.matches("pre.b") {
setupBlock(event.detail.elt)
}
})Hope this helps! |
Beta Was this translation helpful? Give feedback.
Oh right,
htmx:loadcan be confusing because of its name, but as its documentation states:So for each node added by htmx in the DOM, including during the page's lifetime, your function would execute and instanciate a new button.
If you want to run this logic only on the first page load or when the body content changes (i.e. a boosted request that replaces the page content and acts as if you changed page), I think you could check if the
event.detail.eltis the body itself or not (if it isn't, ignore it)It seems you're not using any htmx feature in your JS code though, so you might even want to consider not relying …