How do I format html with MathJax after loading it using jQuery.load?

Question

I am loading a new page with jQuery.load. However, the contents are being treated weirdly somehow. On the original page, I have some code to format latex commands with MathJax:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

And this works fine for the original file. However, when I click on my link and insert more HTML into the page:

<script>
  $(document).ready(function(){
    $("#link").click(function(){
      $("#myDiv").load("test.html");
    });
  });
</script>

Now the special characters are not formatted by MathJax and are just displayed as-is.

Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down for migration tips (and perhaps update your post for future readers). — Peter Krautzberger, Apr 21 '17 at 07:33

score 7 · Accepted Answer · answered Dec 25 '13 at 00:27

Carols 10cents is close, but you need to do the MathJax.Hub.Queue() call in a callback from the jQuery load() so that the typesetting isn't performed until after the file is loaded. (As it stands, it happens immediately after the file load is requested, even though the file may not be available yet). Something like

<script>
  $(document).ready(function(){
    $("#link").click(function(){
      $("#myDiv").load("test.html", function () {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myDiv"]);
      });
    });
  });
</script>

See the examples from a talk I gave at the JMM in January 2013 for more details and the solution to other situations.

score 3 · Answer 2 · edited Jan 06 '16 at 10:23

3

MathJax only processes markup on page load by default, so you need to tell it to process again after you load the new content onto the page. The documentation for MathJax for modifying math on the page recommends, if you only want to process only the new content you added, to do something like:

<script>
  $(document).ready(function(){
    $("#link").click(function(){
      $("#myDiv").load("test.html");
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, "myDiv"]);
    });
  });
</script>

They mention a few other ways to do this depending on your application, so I recommend reading that page to find the best way for you.

edited Jan 06 '16 at 10:23

xuhdev

8,018
2
41
69

answered Dec 24 '13 at 22:57

carols10cents

6,943
7
39
56

I added this line but the same is happening.The content is not formatted appropriately. – curious Dec 24 '13 at 23:22
Now you need to call `MathJax.typeset()` after the page update. The link to the documentation is helpful – dmitry_romanov Jun 19 '23 at 14:08

How do I format html with MathJax after loading it using jQuery.load?

2 Answers2

Linked