@Timothy_Bennett today I decided to run some tests on my plugin that loads external html tags via the fetch(path).text() method and I came across a very serious error like: The index.html or manifest.json don’t seem to recognize any UXP interface input, like sp-button, sp-slider… from the external.htm file, as I get the error when adding any event listener in the js.
How do you go about solving this? Thanks.
Here is my very simple project
When index.js is loaded, you still don’t have #btn2 in your HTML, hence the error. You should add this listener after modal is loaded and this button is rendered
Hi @Karmalakas thanks for the tip, a workable solution I found here was to add all ovintes inside own function that loads the modal at the end of the block.
Haven’t gotten fetch() to work at all yet on files in my plugin dir. Instead, I’ve been using fs.readFile and fs.readFileSync to the same effect.
e.g.
const fs = require('fs')
//blocking load
const HTMLString = fs.readFileSync('./dialogs/myDialog.html', 'utf-8')
One thing to note about setting the inner HTML in this way is that you can’t have bound executions in the HTML. For example, its convenient to make the cancel and OK button close the dialog window by doing this:
<sp-button
id="myDialogCancelBtn"
onclick = document.querySelector("#myDialogID").close("cancel")
>
But you will get an exception and the inner HTML will be refused.
The solution is to bind those things via JS after the fact using .addEventListener() on the element.