Question 392589 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery().html() containing script tag with type="module" including external js file

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:

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);
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    If you are looking to load a script file using jQuery a better way to do it would be
    jQuery.getScript(“alert.js”) rather than mutating the html using jQuery(…).html

    You can also implement logic in the callback of after the script has been loaded. Like so

    jQuery.getScript('alert.js', function() {
   alert(…);
});
    Login or Signup to reply.
  3. 0

    Try to append the element, followed by the script:

    $('#some-div')
  .append($('<div>', { text: 'Bla bla bla' }))
  .append(`
    <script type="module">
      export const message = 'Hello';
      alert(message);
    </script>
  `);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="some-div"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search