calling mathjax on asynchronous loaded content
mikev3
be blunt I don't understand it. I use an ajax call to replace some
divs. The new divs have tex in them and I want mathjax to process
the tex without reloading the whole page.
Any help would be appreciated.
Davide P. Cervone
http://www.mathjax.org/resources/docs/?queues.html#the-mathjax-processing-queue
and looking at the MathJax/test/sample-dynamic.html file in the
MathJax distribution.
Basically, when you want to handle new mathematics that has been added
to the page, use
MathJax.Hub.Queue(["Typeset",MathJax.Hub,element]);
where "element" is either a string containing the ID of the DOM
element whose contents is to be processed, or a reference to the DOM
element itself (e.g., something returned by document.getElementById()
or a similar function).
Davide
mikev3
documentation page and it's a bit over my head. I have programming
experience but not much with Javascript. I tried something like this:
function replaceMath(){
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"video_title"]);
}
video_title is the div id that I want processed and replaceMath() is
called with the same onClick that switches the divs. This attempt did
not work. I really appreciate any more suggestions/help!
Thanks,
Mike.
Davide P. Cervone
code. It is hard to tell without more details, and a more complete
description of what is happening (it "did not work" doesn't give us
much to go on).
In any case, here is a working example:
<html>
<head>
<title>MathJax: Test dynamic math</title>
<script src="/MathJax/MathJax.js">
MathJax.Hub.Config({
jax: ["input/TeX","output/HTML-CSS"],
extensions: ["tex2jax.js"]
});
</script>
<script>
var n = 0;
var equation = [
'This is math: $$x+1\\over x-1$$',
'More math: if $x^2-x-2=0$ then $x = 2$ or $x = -1$.',
'Last math: $\\sqrt{x^2+1}$.'
];
function ChangeMath () {
document.getElementById("math-div").innerHTML = equation[n];
n++; if (n >= equation.length) {n = 0}
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"math-div"]);
}
</script>
</head>
<body>
<input type="button" onclick="ChangeMath();" value="Change Math">
<p>
<div id="math-div" style="border:3px groove; padding: 3px; height:
8em; width:30em"></div>
</body>
</html>
mikev3
insights on how to test my set-up . I've done alot of testing and
looking around and I think I discovered my problem. I use a script to
replace this:
<div id="video_title"> \(\displaystyle\lim_{x \to 0}\frac{|x|}{x}\)
- Orignial Limit</div>
with this:
<div id="video_title"> \(\displaystyle\lim_{x \to 0}\frac{|1|}
{x^2}\) - A Different Limit</div>
When I called replaceMath(), the MathJax would run and display the
contents of the original div, not it's replacement. When I don't call
MathJax I can see in the browser
"\(\displaystyle\lim_{x \to 0}\frac{|1|}{x^2}\) - A DIfferent
Limit"
But then when I look at the page source I see the original div. No
wonder MathJax is switching it back, I'm assuming it's processing the
page source. I guess my problem comes down to a misunderstanding on
how AJAX/Server Requests work, because the browser is displaying the
proper content but the page source isn't updated. If I'm changing the
content of a div with AJAX (just calling a txt file to replace the
div) is there a way to get MathJax to process it?
Thanks,
M.
Here is my JS for the Server Request
//Change the contents of div id="video_title"
function titleSwitch(videoTitle)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp2=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange=function()
{
if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
{
document.getElementById("video_title").innerHTML=xmlhttp2.responseText;
}
}
xmlhttp2.open("GET", videoTitle + ".txt" ,true);
xmlhttp2.send();
mikev3
different approach. I load all the content within hidden divs then
use javascript to toggle between hidden and visible. Thanks for the
help, your responses led me to testing/researching that ended with
this final approach which I am very happy with.
Mike
Davide P. Cervone
page HTML, not the current contents of the document's DOM. That will
always be the same no matter what changes are made by javascript
afterward. To see the current state of the DOM you need to use
something like Firebug (comparable functions exist in Safari, Opera,
and IE8+), which lets you interactively inspect the document's
internal structure.
As for the mathematics, your code snippet doesn't include the call to
MathJax, so it is not clear how you are combining this with the
updating of the math. I suspect you may be doing
titleSwitch("new title");
replaceMath();
which is not correct. Your XmlHttpRequest is asynchronous, so the
titleSwitch() call simply initiates the request and then returns.
That means replaceMath() will run before the response form the
XmlHttpRequest call is completed, and so before the contents of the
div has been replaced.
If you put
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"video_title"]);
after
document.getElementById("video_title").innerHTML=xmlhttp2.responseText;
in the onreadystatechange handler, then I suspect the math will update
properly for you.
Davide
PS, I'm glad you found another way to do what you wanted. Including
all the mathematics initially and hiding all but one is often a good
approach.
mikev3
apologize for my inexperience and I really appreciate the time and
thought you put into your responses!
Thanks,
M.
Robert Miner
This seems like a common use case that would be nice to document better. I'd like to collect together the info from this thread and put together a page with the sample code and discussion, and get it into the docs, and/or put it up on mathjax.org as an article.
However, it will probably happen a lot sooner if someone else would like to take that on as a project! We could at least give you attribution and plug your website/blog/MathJax-related project, etc. As a start, you could even do a page in your own blogs/sites and we could point to you.
Any takers?
--Robert
Robert Miner
Vice President, Research and Development
MathJax Project Coordinator
Design Science, Inc.
140 Pine Avenue, 4th Floor
Long Beach, California 90802
USA
Main: (562) 432-2920
Direct: (651) 223-2883
Fax: (651) 292-0014
rob...@dessci.com
www.dessci.com