Second call to Mathjax typeset function from jQuery not working

user_12183390 0
Viewed 1749

I am trying to view the equations typed in HTML textbox (in Tex) as mathematical equations using MathJax. If the equations are not correctly viewed, I need to edit the equations and review it, in mathematical equations.

For the first time, it works fine. But after the editing is performed the Mathjax typeset command shows errors. Requesting you to please go through it, and suggest possible error(s).

The HTML I am using is:

<html>
    <head>
        <title>
            Equation Edit
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>
    </head>
    <body>
        <strong> Here is the result :<br></strong>
        <input type="text" id=input value="\(ax^2 + bx + c = 0\)">
        <div id="qPreview"></div>
            <button id="check">Click</button>
    </body>
</html>

The script I am using is:

<script type="text/javascript">
            var eq;
            $("#check").click(function(){
                eq=document.getElementById("input").value;
                document.getElementById("qPreview").innerHTML=eq;
                MathJax.typeset(qPreview[0]);
            });

        </script>

It shows the following error for the second time when I click the button:

Uncaught TypeError: Cannot read property 'appendChild' of null at l.append (tex-mml-chtml.js:1)

I am new to javascript. I thank you in advance, for sharing any error or suggestion for the code to work properly.

typeset mathjax ajax javascript
1 Answers

I encountered the same problem, and I think it might be a bug. Anyway, it can be solved by rendering the equation to an auxiliary "p" tag inside your "qPreview" div, then deleting and re-creating this tag when the equation is modified. For example:

$("#check").click(function(){
    $("#qPreview").empty().append("<p>" + $("#input").val() + "</p>");
    MathJax.typeset(["#qPreview"]);
});
<script src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<strong> Here is the result :<br></strong>
<input type="text" id=input value="\(ax^2 + bx + c = 0\)">
<div id="qPreview"></div>
<button id="check">Click</button>

Some notes to your code:

  • If you are using jQuery, then you can make your life easier using it instead of getElementById function: you can write $("#input").val() instead of document.getElementById("input").value
  • The qPreview variable is not defined, so MathJax.typeset(qPreview[0]) would result in an error.
  • MathJax.typeset() expects either no arguments or a list as an argument. (That's why "#qPreview" is in brackets in my code). For more info, see the documentation:

    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.

user_74716580
Related