When I try to set div content with jQuery("#some-div").html("<app-bysquare>Bla bla bla</app-bysquare><script>alert("OK");<\/script>");, then the alert(); is fired up just fine.
If I try to include external js file that contains just alert(); like this jQuery("#some-div").html("<app-bysquare>Bla bla bla</app-bysquare><script type="text/javascript" src="alert.js"><\/script>");, then it is fired OK.
But if I try to instead include external js file that contains alert(); right after the import lines like this jQuery("#some-div").html("<app-bysquare>Bla bla bla</app-bysquare><script type="module" src="alert.js"><\/script>");, then it is not fired up - why?
As a test, if I remove those 3 lines of import from the external js seen below, then that alert(); would come up, but then, of course, the code itself would not work missing those 3 important lines. :-)
BTW guys, this alert(); is really just a simple example to check if the script is loaded/included or not, BUT in reality that external js file is MODULE that should outputs payment QR code into that dynamically created div of "Bla bla bla" - just to clarify things here as I see you might be mislead in what I am up to here!
If it would help, this is the content of that actual external js file I am trying to make work (all the values are fictional in this example, of course), that is outputting the payment QR code into that app-bysquare:
source link: github.com/xseman/bysquare/
import { CurrencyCode, encode, PaymentOptions } from "https://esm.sh/[email protected]/";
import { html, LitElement } from "https://esm.sh/[email protected]/";
import { qrcanvas } from "https://esm.sh/[email protected]/";
alert();
/**
* @extends {LitElement}
*/
class Bysquare extends LitElement {
static properties = {
_qrstring: { state: true },
_ammount: { state: true },
_variable: { state: true },
_iban: { state: true }
};
constructor() {
super();
this._qrstring = "";
this._ammount = 10;
this._variable = "0026548";
this._iban = "SK9611000000002918599669";
}
firstUpdated() {
this.#generateQrstring();
}
get #canvas() {
return this.shadowRoot?.querySelector("canvas");
}
render() {
return html`
<div>
<canvas
@click=${this.#setCanvas}
height="200"
width="200"
></canvas>
</div>
`;
}
#generateQrstring() {
alert(_test);
const qrstring = encode({
invoiceId: new Date().toLocaleDateString("sk"),
payments: [
{
type: PaymentOptions.PaymentOrder,
amount: this._ammount,
bankAccounts: [{ iban: this._iban }],
currencyCode: CurrencyCode.EUR,
variableSymbol: this._variable,
paymentNote: "Some text here"
}
]
});
this._qrstring = qrstring;
this.#setCanvas();
}
#setCanvas() {
if (this.#canvas) {
const ctx = this.#canvas.getContext("2d");
if (ctx) {
ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
qrcanvas({
data: this._qrstring,
canvas: this.#canvas
});
}
}
}
}
customElements.define("app-bysquare", Bysquare);
With the help of @Bergi I found out where the problem was: broken external variable called "_test" (it is "funny" as in fact this one is not needed at all for the script itself, read below if you will).
Although I never do that, I did now opened Console in Firefox (F12) and there were 2 errors: one was just the fact I was still running that code below that was voted down (removed now from the code), but the second error was the culprit: some reason that external file was not catching another external variable I defined before, which is called just only as another check that the external js file works. I fix that and now IT WORKS.
Problem was that originally, that external js file was loaded in the head metatag, thus the variable defined was caught OK, but since I changed the way it operates (dynamically via jQuery().html()), it was broken.