MathJax and innerHTML

1,443 views
Skip to first unread message

Hugues VERMEIREN

unread,
Feb 24, 2012, 3:40:49 PM2/24/12
to MathJax Users
When put in the innerHTML command, the LaTeX string is not parsed by
the browser. Why?
Is some escape character needed in front of the backslashes? Thank
you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Test innerHTML and MathJax</title>
<meta http-equiv="Content-Type" content="text/html;
CHARSET=utf-8" />
<script type="text/javascript">
function display_eq(){
document.getElementById("MyEquation").innerHTML='\( \frac{x^2-1}
{x^2+1}=3 \)';
}
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-
AMS-MML_HTMLorMML">
</script>
</head>
<body>
<input type="button" onclick="display_eq()" value="Display my
equation">
<br />
<div id="MyEquation">
</div>
</body>
</html>

leathrum

unread,
Feb 24, 2012, 3:52:10 PM2/24/12
to MathJax Users
Time again for my favorite MathJax documentation link:

http://www.mathjax.org/docs/1.1/typeset.html

You see, MathJax needs to be told that the innerHTML has changed, so
that it can process the new math content.

But there is another problem with your code, which you seem to have
anticipated: yes, you need to use double-backslashes when the TeX
code is in a JavaScript string -- so in your code:

document.getElementById("MyEquation").innerHTML='\\( \\frac{x^2-1}
{x^2+1}=3 \\)';

But after the innerHTML is set like this, you have to find a place to
call:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MyEquation"]);

You could just do this in the next line of your display_eq() method.

shot...@gmail.com

unread,
Nov 20, 2014, 12:50:01 PM11/20/14
to mathja...@googlegroups.com
Thanks!!

even 2 year later, it is really usefull your answer! :)

ashwi...@gmail.com

unread,
Mar 25, 2015, 8:01:51 AM3/25/15
to mathja...@googlegroups.com
I have same problem
I dont know how to do this (MathJax needs to be told that the innerHTML has changed, so
that it can process the new math content. )
Went through documentation no material found till now
Can you please guide me
Regards
Ashwini

Ashwini

unread,
Mar 25, 2015, 9:12:11 AM3/25/15
to mathja...@googlegroups.com
I have a button on click to call typeset
function typeSet(){
MathJax.Hub.Queue(function () {
   studentDisplay = MathJax.Hub.getAllJax("#mathDiv")[0];
 
 console.log("studentDisplay"+MathJax.Hub.getAllJax("#mathDiv")[0].originalText);
var studentAnswer;
var text = MathJax.Hub.getAllJax("#mathDiv")[0].originalText;
var math = MathJax.Hub.getAllJax("#mathDiv")[0];
var math1 = MathJax.Hub.getAllJax("#editNameDiv")[0];
MathJax.Hub.Queue(["Text",math,"\\displaystyle{"+text+"}"],math1);
 });

It is typesetting but the outer page not my inner html
dont know where i am going wrong

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/_goOWM7tJ80/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Regards,
Ashwini Iyer

Peter Krautzberger

unread,
Mar 25, 2015, 9:56:39 AM3/25/15
to mathja...@googlegroups.com
Hi,

Please try to create a live example, e.g. using codepen, jsbin etc.

Regards,
Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

Ashwini

unread,
Mar 26, 2015, 12:34:56 AM3/26/15
to mathja...@googlegroups.com
I have a main jsp where any TeX code is getting translated.
So mathjax is loading to the jsp.
I have a checkbox which i select and click on edit.
The edit Screen is a "inner html " which loads after
There i have some TeX code which i need to typeset.
i have put it in a <p id = 'mathDiv'>
so I use the above code to typeset the mathDiv element in the inner html.
I see typeset being invoked but on parent jsp not on inner html.
Not able to figure out why this is happening.
I hope i am clear in my question.....


function typeSet(){
MathJax.Hub.Queue(function () {
   studentDisplay = MathJax.Hub.getAllJax("#mathDiv")[0];
 
 console.log("studentDisplay"+MathJax.Hub.getAllJax("#mathDiv")[0].originalText);
var studentAnswer;
var text = MathJax.Hub.getAllJax("#mathDiv")[0].originalText;
var math = MathJax.Hub.getAllJax("#mathDiv")[0];
var math1 = MathJax.Hub.getAllJax("#editNameDiv")[0];
MathJax.Hub.Queue(["Text",math,"\\displaystyle{"+text+"}"],math1);
 });

Reply all
Reply to author
Forward
0 new messages