Second call to Mathjax typeset function from jQuery not working

Question

Second call to Mathjax typeset function from jQuery not working

2.7k Views Asked by Asheshanand Acharya At 17 October 2019 at 10:02

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/[email protected]/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.

Original Q&A

There are 1 best solutions below

**hakkelt** · Answer 1 · 2019-10-26T17:16:28.707000

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/[email protected]/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.

Second call to Mathjax typeset function from jQuery not working

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in AJAX

Related Questions in MATHJAX

Related Questions in TYPESET

Trending Questions

Popular # Hahtags

Popular Questions