Skip to content
Advertisement

Rendering MathJax after loading content with jQuery

I load some content containing math with jQuery into my html file. Now I want Mathjax to typeset this new content, but it doesn’t work. This is what my JavaScript code looks like

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>


<script>
      $(document).ready(function(){
        $("#newContent").click(function(){
          $("#content").load("{% static 'newContent.txt' %}");
          MathJax.typeset();
        });
      });
</script>

But it only loads the content without applying MathJax. Any suggestions why it is not working?

Edit I added a second button with a second click function, which runs the following script

<script>
  function myfunction(){
    MathJax.typeset();
  }
</script>

If I click the first button, then it loads the new content without applying MathJax. If I now click the second button, it applies MathJax to the new content. This tells me that it is possible to apply MathJax to my loaded content, however, loading new content and typesetting it with one click doesn’t work so far.

Advertisement

Answer

This happens because load sends an AJAX request, which is asynchronous. This means it is possible (and very likely) that the code after the call to load gets executed before the server has sent a response. In the above example, the call to load starts an asynchronous request, then the call to MathJax.typeset() runs while there is still no math on the page, so nothing happens. Finally, the load request completes, loading the math content.

In order to ensure the typesetting happens after the math is loaded, the call to MathJax.typeset must occur in a callback function provided to the load call. Based on the example in the jQuery documentation, this would look like

$("#content").load("{% static 'newContent.txt' %}", () => MathJax.typeset());

You can let MathJax know which element to render by providing its id in an array:

$("#content").load("{% static 'newContent.txt' %}", () => MathJax.typeset(['content']));
Advertisement