Displaying ascimath using javascript

Question

Created a html with

<div id="math-display">   </div>

Next, on the main.js, retrieve from the database using ajax and pass the data which are in asciimath using json.mathanswer. The aim is to display the return data which are in asccimath as mathematical expression. For example: data retrieved from database is *dy/dx = 3*x^3*. Passed to json.mathanswer.

Have tried using the following code:

$('#math-display').append(json.mathanswer);

or

document.querySelector('#math-display').textContent =json.mathanswer;

The display is still in asciimath, i.e. *dy/dx = 3*x^3*.

Also tried using the delimiters:

$('#math-display').append(`json.mathanswer`);

or

document.querySelector('#math-display').textContent =`json.mathanswer`;

The result is json.mathanswer will be displayed in the space allocated.

How to display the asciimath retrieved as data in mathematical expression html using javascript?

Answer 1

The problem lies in the facts that many have come across and posted on stackoverflow. Thank you for all those clues.

For instance:

Javascript Mathjax

load Mathjax after loading javascript

The html for the parts that the asciimath code resides needs to be refresh after loading the input from ajax call. Thus calling the following code to reload after loading the ajax call.

In my case, MathJax.Hub.Queue(["Typeset",MathJax.Hub, "expression"]); did the job in displaying the mathematical expression.