0
202
ViewsTypeError: Cannot read properties of undefined, when trying to load MathJax to a div
I'm building a system that generates equations and math exercises for the user. The client sends a GET request to fetch the exercise, and the server responds with the appropriate exercise. For that, I generated a new div with the id "questionLoad", and set its content to the given exercise.
I tried to render it with mathjax with MathJax.Hub.Queue(['Typeset',MathJax.Hub,"loadQuestion"]);
but then I got the following Error:
Here is the relevant function:
function startGame() {
console.log("starting the game");
let spinner = `
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
`
// adding a loading animation until the server responds
$("#wrapper").html("<h3>Loading .... </h2>" + spinner);
let requestDict = { // telling the server to fetch a linear equation
type: 'LinEq',
};
const requestJson = JSON.stringify(requestDict);
fetch(`the server path`)
.then(function(response) {
return response.text();
}).then(function(server_response) {
// change the text of the div from a loading to the loaded equation
$("#wrapper").html(`<div id='loadQuestion'><span style='font-size:25px;'>${server_response}
</span></div>`);
// load MathJax into the div. Doesn't work!
MathJax.Hub.Queue(['Typeset', MathJax.Hub, "loadQuestion"]);
});
}I would really appreciate any suggestions. Thanks!
1 answers
Answer question0
You have to supply the DOM element as the third argument, not the id of the DOM element.
MathJax version 2
MathJax.Hub.Queue([
'Typeset',
MathJax.Hub,
$("#loadQuestion")[0]
])
Working sandbox sample: https://codesandbox.io/s/so-71615834-mj2-9w4b9f
MathJax version 3
MathJax.startup.promise.then(() => {
MathJax.typesetClear([$("#holder")[0]]);
MathJax.typeset([$("#holder")[0]]);
})
Working sandbox sample: https://codesandbox.io/s/so-71615834-mj3-yx1d41
In both versions, if you leave out the element to typeset, the whole page will be typeset anew.