MathJax.typeset(): How does it work?

[msrumon]

Hi,
In version 2, I used to use MathJax.Hub.Typeset(<element>) to typeset dynamically loaded contents. In version 3, I am trying to use Mathjax.typeset(<element>), but I get the following error:

Uncaught TypeError: Object is not iterable.

I am following this doc. And here is my configuration:

/* === other codes === */
case "/academic":
    const loadMathJax = document.createElement("script"), configMathJax = document.createElement("script");
    document.head.appendChild(configMathJax);
    document.head.appendChild(loadMathJax);
    loadMathJax.src = "scripts/mathjax.js"; // this file is carbon-copy of 'tex-mml-chtml.js'
    configMathJax.innerText = `window.MathJax = { options: { ignoreHtmlClass: "tex2jax_ignore", processHtmlClass: "tex2jax_process" }, tex: { autoload: { color: [], colorV2: ["color"] }, packages: { "[+]": ["noerrors"] } }, loader: { load: ["input/asciimath", "[tex]/noerrors", "[tex]/mhchem"] } }`;
    /* === other codes === */
    li.onclick = () => {
        const res = document.createElement("div");
        /* === other codes === */
        inner.appendChild(res);
        res.innerHTML = each.content;
        window.MathJax.typeset(res); // this line is kicking the error
    };
/* === other codes === */

Maybe I am missing something, can I get a little more guideline on how this function works?
Thanks in advance.

[dpvc]

On the page you link to it describes MathJax.typeset() and MathJax.typesetPromise as follows:

Both functions take an optional argument, which is an array of elements whose content should be processed. An element can be either an actual DOM element, or a CSS selector string for an element or collection of elements. Supplying an array of elements will restrict the typesetting to the contents of those elements only.

So you should be passing an array of elements, not a single element. Try using

MathJax.typeset([res]);

instead.

Also note that you don't have to create a configMathJax script. Just do

window.MathJax = {
  options: {
    ignoreHtmlClass: "tex2jax_ignore",
    processHtmlClass: "tex2jax_process"
  },
  tex: {
    autoload: { color: [], colorV2: ["color"] },
    packages: { "[+]": ["noerrors"] }
  },
  loader: { load: ["input/asciimath", "[tex]/noerrors", "[tex]/mhchem"] }
};

before appending the script that loads scripts/mathjax.js. If you do stick with the script like you have it, you should insert it before inserting the one that loads MathJax, since the script needs to be in place when MathJax is initialized, not after.

[msrumon]

Hello,
Thanks for the info. This is how my head looks like with my current implementation:

Q1- Is this correct?
Now I am getting this error:

Uncaught TypeError: t.splitText is not a function

right here, at the boxed line:

Q2- Any idea about this error?

[msrumon]

Update from previous comment:
Regarding to Q2, I have found that the splitText() error is arised for my content. I am pasting raw HTML content here, which needs to be typeset:

<h3 class="center-align">Beats</h3>
<p>In your Physics 1<sup>st</sup> Paper textbook, under <s>Chapter-18</s> Chapter-9, there is an article called &quot;Beats&quot;. Here I&apos;ll briefly discuss what Beats is and later on teach you a solid technique of how you will solve problems related to Beats.</p>

<div class="row">
    <div class="col l6 m12 offset-l3">
    <div class = "card">
        <div class="card-image">
            <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/WaveInterference.gif" alt="Wave Interference GIF by WikiMedia">
        </div>
        <div class="card-content">
        <h5 id="def">Definition:</h5>
        <p>When two sound waves of same amplitudes and nearly same frequencies progress through a medium, they create a resultant wave, according to the law of superposition, whose amplitude varies along its path over time.</p>
        </div>
    </div>
    </div>
</div>

<h5 id="eqn">Equation:</h5>
<p>We know that the number of beats produced per second is\[N = f_1 \sim f_2\]</p>
<p>where \(f_1\) and \(f_2\) be the frequencies of the waves.</p>
<p>Usually one of them is greater than other and we simply substract the greater frequency from the smaller one to calculate the number of beats. Our job here is simple: find out which one is greater. And I will teach you the ULTIMATE technique to do that within seconds.</p>
<p>Before I jump into the technique, let&apos;s have a look at the following problem:</p>

<div class="card">
    <div class="card-content">
        <h5>Problem #1</h5>
        <p>Liana, a student of physics took two tuning forks and saw that on one \(312 \space Hz\) is inscribed. She sounded both tuning forks at the same time and heard \(6\) beats. Now she curled a wire on the unidentified tuning fork. She heard the same number of beats as she sounded this one.</p>
        <p>What was the frequency of the unidentified tuning fork before curling the wire?</p>
        <br>
        <p><strong>Solution:</strong> Frequency of the unidentified tuning fork is: \(312 + 6 = 318 \space Hz\).</p>
    </div>
</div>

<p>Wonder how did I do that? Let&apos;s find out.</p>

<div class="card hoverable">
    <div class="card-content">
        <h4 class="center-align amber-text">TECHNIQUE!</h4>
        <p>First thing first: The following assumptions must be kept as it is:</p>
        <h5>Assumptions:</h5>
        <ul class="fa-ul">
        <li><span class="fa-li"><i class="fas fa-check fa-fw"></i></span>Frequency of identified/knwon tuning fork: \(f_1\)</li>
        <li><span class="fa-li"><i class="fas fa-check fa-fw"></i></span>Frequency of unidentified/unknwon tuning fork: \(f_2\)</li>
        </ul>
        <p>With these having set, you have to check the following conditions:</p>
        <h5>Conditions:</h5>
        <ol>
        <li>Changes must be done on UNKNOWN fork.</li>
        <li>Results must be asked to determine AFTER change.</li>
        <li>These relations must be satidfied as well:
            <ul class="fa-ul">
            <li><span class="fa-li"><i class="fas fa-check fa-fw"></i></span>\(N \propto \sqrt{m}\)</li>
            <li><span class="fa-li"><i class="fas fa-check fa-fw"></i></span>\(N \propto l\)</li>
            <li><span class="fa-li"><i class="fas fa-check fa-fw"></i></span>\(N \propto {1 \over f}\)</li>
            <li><span class="fa-li"><i class="fas fa-check fa-fw"></i></span>\(N \propto {1 \over \sqrt{T}}\)</li>
            </ul>
            <p>where \(m\), \(l\), \(f\) and \(T\) be the mass, length, frequency and time period of the tuning fork respectively.</p>
        </li>
        </ol>
    </div>
</div>

<p>Now you have to set this in mind once and for good: If all the above conditions are met, then \(f_1 &gt; f_2\). Otherwise \(f_1 &lt; f_2\).</p>
<p>Let&apos;s go back to the previous example problem and see if we can understand that.</p>

<div class="card">
    <div class="card-content">
        <h5>(1) Make the assumptions correctly.</h5>
        <p>Given,<br>\(N = 6\)<br>\(f_1 = 312 \space Hz\)</p>
        <p>To find: \(f_2 = \space ?\)</p>
        <h5>(2) Now check the conditions.</h5>
        <ul class="fa-ul">
            <li class="green-text"><span class="fa-li"><i class="far fa-check-circle fa-fw"></i></span>Wire has been curled on unidentified tuning fork.</li>
            <li class="green-text"><span class="fa-li"><i class="far fa-check-circle fa-fw"></i></span>Result is asked to determine before change.</li>
            <li class="red-text"><span class="fa-li"><i class="far fa-times-circle fa-fw"></i></span>Wire made the tuning fork heavier, so it&apos;s mass has been increased. From our relations, we see that number of beats should be increased. But it didn&apos;t in this case.</li>
        </ul>
        <p>So, 2 out of 3 conditions have not been met. This means \(f_1\) must be less than \(f_2\). That is, our equation will be \(N = f_2 - f_1\).</p>
        <p>Therefore, \(f_2 = f_1 + N = 312 + 6 = 318 \space Hz\).</p>
    </div>
</div>

And here is the output:

I think the authors of MathJax can explain this.

[dpvc]

Uncaught TypeError: t.splitText is not a function

This is the issue reported in mathjax/MathJax#2202, which is due to a bug in MathJax that incorrectly handles math that has a tag directly before or after it. So you could work around this by making sure there is a space before any math that directly follows an HTML tag, and a space after any that is immediately before a tag.

The fix for it is in the develop branch, but is not yet in a released version of MathJax.

[msrumon]

Thanks for letting me know about that issue. But this is not the case for me. Look at the line:
"To find:"
in the above image. This line is perfectly rendered, though there is an HTML tag after that (</p>). So, there must have been other thing that we are not being able to identify.

[dpvc]

I took your example file and added spaces before and after any math that was next to a tag, and it rendered fine for me. It may not be that every one causes the problem, but that is the issue that you are running into here.

[msrumon]

Oh I see... So, the problem only seems to be happened with <br> tag only. I missed that spot and it's working! Thanks for your help. :)