Javascript needs "forcing" on latest Linux desktop version

[mycheze]

Hi!

I just updated Anki to 2.1.44 on my Linux machine (running Pop!_OS 20.10) from the .deb package on the Anki website. Now, I’m having weird issues with some cards. They all used to work great. I restarted Anki, did as many checks as I could, and I don’t think it’s my error, but easily could be.

Anyway, I have JS on a lot of cards to help study vocab and stuff. But it suddenly stopped working when I updated, except if I somehow “force” the card to reload. What I mean is, I’ll see a card without the JS running, then if I hit Edit then immediately close the Edit window, it will start working.

I will include 3 images. The first is what I see when the card opens, and the second is when I hit Edit then Esc (changing nothing). The third is the back side of the card, which should have the JS as well. And like I said, all this was working totally fine before the update.

Let me know what I should look into to help fix this.

[kleinerpirat]

You’ll need to adjust your scripts, as Anki >=2.1.41 will not reload the entire page, but only the parts that change (for performance reasons).

[regression?] javascript issue with let and const variable assignation

I guess this is because Anki uses a single webview for the review session and just changes parts of it for each card (recycling the webview periodically). You have to manually execute your code for each card, maybe relying on hooks to trigger it, depending on what your code is trying to do.

@hengiesel

Anki does not rebuild the DOM for efficiency purposes. Having to reload MathJax, jQuery libraries, etc. on every single card is pretty wasteful. In the future AnkiDroid will also probably head that way.
A strategy to avoid running code too many times is “guards”, where you have a variable, which checks, whether a specific code was already run:

// globally
if (!globalThis.myCodeIntialized) {
    // run my code
    globalThis.myCodeInitialized = true;
}

// or for specific HTML elements
if (!htmlElement.hasAttribute("has-myCode")) {
    // setup htmlElement
    htmlElement.setAttribute("has-myCode", "");
}

Normal function calls like fooBar() within your template should execute with each new card, but if you want to make sure:

@dae

Best practice would be to move your code into an IIFE .

[dae]

To clarify, earlier desktop releases also dynamically updated the page; this likely broke because the way the page is updated changed. Unfortunately this is the risk of Javascript: Styling & HTML - Anki Manual