Estoy construyendo un sistema que genera ecuaciones y ejercicios matemáticos para el usuario. El cliente envía una solicitud GET para obtener el ejercicio y el servidor responde con el ejercicio apropiado. Para eso, generé un nuevo div con el id "questionLoad" y configuré su contenido para el ejercicio dado. Traté de renderizarlo con mathjax con MathJax.Hub.Queue(['Typeset',MathJax.Hub,"loadQuestion"]); pero luego obtuve el siguiente error:
Aquí está la función relevante:
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"]); }); }Realmente apreciaría cualquier sugerencia. ¡Gracias!
Debe proporcionar el elemento DOM como tercer argumento, no la identificación del elemento DOM.
MathJax.Hub.Queue([ 'Typeset', MathJax.Hub, $("#loadQuestion")[0] ])Muestra de sandbox de trabajo: https://codesandbox.io/s/so-71615834-mj2-9w4b9f
MathJax.startup.promise.then(() => { MathJax.typesetClear([$("#holder")[0]]); MathJax.typeset([$("#holder")[0]]); })Ejemplo de espacio aislado de trabajo: https://codesandbox.io/s/so-71615834-mj3-yx1d41
En ambas versiones, si omite el elemento a componer, toda la página se volverá a componer.