Refreshing Javascript on the page without refreshing HTML

Question

A little context on my problem. I am updating the MathML in this div that is currently displaying HTML. When I load the page the first time, if runs the MathJax script and displays all the MathML perfectly. When I click "Preview Changes", a button that takes the current changes made in a text area and displays them on the preview div, the MathML disappears.

I think problem here is that refreshing the div doesn't trigger the MathJax script. I have tried $.getScript(), and I tried adding a script using document.createElement(script) everytime the preview changes button is clicked, but all that to no avail.

I was hoping if someone could help me w/ this.

Thank you in advance.

Answer 1

MathJax.Hub.Typeset() is the JavaScript command that can re-render the math content within your page or within individual elements that have been updated by current changes. If you are sure that all typesetting is finished, then you can call it directly, but in general it is good to use the safe way to call it, like this MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

Read more instructions for how to use it here: http://docs.mathjax.org/en/v1.1-latest/typeset.html

For instance, MathJax.Hub.Queue(["Typeset",MathJax.Hub,"previewdiv"]); would re-render the updated contents of the HTML element with an ID of previewdiv after you have updated its contents using your jQuery call.