Mathjax Dynamic Content Rendering

943 views
Skip to first unread message

randeeps...@gmail.com

unread,
Dec 26, 2012, 7:50:39 PM12/26/12
to mathja...@googlegroups.com
Hi,

I have a page where some MathJax content is presented and rendered. When a user clicks a button, a Javascript function is run, it fetches some data from a database and then updates a DIV on the page to include that content. The problem I have is that the MathJax content within that inserted content is not rendered.

I am a bit stuck but guess I need to somehow tell MathJax to typeset this DIV (http://docs.mathjax.org/en/v1.1-latest/typeset.html). I'm not sure how I include this code in the stuff that is being inserted, do I just put some of it between script tags? Any help is greatly appreciated.

Thanks.

Peter Krautzberger

unread,
Dec 27, 2012, 1:19:02 AM12/27/12
to mathja...@googlegroups.com
Have you read the pages before that, e.g., http://docs.mathjax.org/en/latest/synchronize.html ?

The examples that come with the MathJax code include two dynamic loading examples. The simpler one will probably help, http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic.html.

Also, searching the forum will give you many examples that Davide Cervone has provided in the past.

randeeps...@gmail.com

unread,
Dec 27, 2012, 7:40:50 AM12/27/12
to mathja...@googlegroups.com
Sorry that's still a bit beyond me, I've tried a few things but none of them work. Do you have any links to David's posts please? I can't seem to find an example like mine?

Peter Krautzberger

unread,
Dec 27, 2012, 3:47:09 PM12/27/12
to mathja...@googlegroups.com

Thomas Leathrum

unread,
Dec 28, 2012, 2:41:03 PM12/28/12
to mathja...@googlegroups.com, randeeps...@gmail.com
If your DIV has a CSS ID of, say, "MathOutput", so it looks like <div id="MathOutput"></div> in your HTML page, then in the Javascript function where you inject the math into the DIV based on the database info, at the end of that function, place a call to the MathJax Typeset method on the MathJax queue, as MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathOutput"]).  The array input to the Queue method is the MathJax internal way of representing a callback, in this case to the Typeset method (first field) in the MathJax.Hub object (second field), with a parameter identifying the DIV by its CSS ID (third field) so that MathJax can focus on typesetting the contents of that DIV instead of the whole document.  You need to use the Queue because of the issues of synchronization -- MathJax runs asynchronously, so it needs to be sure to finish its other tasks before Typeset is called again.  I'm sure from what you describe that this is what you need -- does this explanation help you understand it?
Thanks,
Reply all
Reply to author
Forward
0 new messages