curious curious - 4 years ago 212
Javascript Question

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

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download