Mathjax and Ajax

[Joel]

I'm experiencing a problem that others have faced, that when portions of a page are updated dynamically the mathjax equation doesn't render. I've seen a few discussions about it that tend to refer people to Modifying math on the page but I am apparently not smart enough to yield a solution from that. It refers to using something like MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathExample"]) but I'm not sure exactly where and when to do that. If anyone has solved this issue and can provide some guidance it would be most appreciated. 

Mathjax is awesome btw. 

Joel

[Dr. Dayal D. Purohit]

after the page is updated with new content by ajax or whatever means, just call

MathJax.Hub.Typeset();

on the client side of course

and Mathjax will render any new math content in the entire page.

d^3p

[Davide P. Cervone]

Whenever you add new content to the page, you should use the command you referenced in order to ask MathJax to typeset that new content.  So you should put the MathJax.Hub.Queue command right after you insert the new content into the DOM.  If you are using Ajax calls to get the content, there should be a callback that you can use that will be triggered when that new content is available.  That is where you would put the MathJax.Hub.Queue call.

Davide

[Joel]

I did finally get this to work with MathJax.Hub.Typeset() after going through a "let's make this harder than it really is" phase. Thanks for the feedback. 

The issue I face now is that on first load you can actually see it flash the orignal text before the ajax callback executes and MathJax renders the content. Is there a typical approach whereby only the rendered content actually displays? Or is this an expected result of doing this in an ajax call? 

I am rather new to jquery. The call I am using looks something like this: 

$("#DivID").load('@Url.Action("ActionResultMethod", "ControllerName",{controller parameters})', function () { MathJax.Hub.Typeset(); });

I gather the MathJax.Hub.Typeset() call targets the entire page instead of just the div I need. Perhaps that is part of the problem? I started out trying to use MathJax.Hub.Queue but never could get that to work. 

Any suggestions appreciated. 

Thanks,

Joel

[Peter Krautzberger]

Hi Joel,

The documentation about typesetting individual id's is at http://www.mathjax.org/docs/2.0/typeset.html#manipulating-individual-math-elements

Peter.

[Davide P. Cervone]

> The issue I face now is that on first load you can actually see it
> flash the orignal text before the ajax callback executes and MathJax
> renders the content. Is there a typical approach whereby only the
> rendered content actually displays? Or is this an expected result of
> doing this in an ajax call?

It is not unusual for the original text to be visible before MathJax
processes it. If MathJax needs to load any components (like its
output jax the first time it is used), that is done asynchronously, so
the page will be displayed in the meantime until the component is
loaded.

You could set the div's visibility:hidden property before loading its
contents, and then after it is loaded, typeset the math setting
visibility to "" afterward. You would need to use the
MathJax.Hub.Queue to synchronize that. E.g.

$("#DivID").css("visibility","hidden");

$("#DivID").load('@Url.Action("ActionResultMethod", "ControllerName",
{controller parameters})', function () {

MathJax.Hub.Queue(
["Typeset",MathJax.Hub,"DivID"],
function () {
$("#DivID").css("visibility",""); // may have to be "visible"
rather than ""
}
);
});

might work. I don't use jQuery myself, so don't know if this is
correct or not.

> I gather the MathJax.Hub.Typeset() call targets the entire page
> instead of just the div I need. Perhaps that is part of the problem?

No, it is probably an asynchronous file load that is at issue.

> I started out trying to use MathJax.Hub.Queue but never could get
> that to work.

See if the example above helps.

Davide