Rendering MathJax updated with .html()

Question

jsfiddle example: https://jsfiddle.net/3qu846tu/

I'm trying to update MathJax-math by means of .html(), however, it seems my code isn't working. My current code looks somewhat like this, but it outputs "1+2=3" unrendered:

$$\class{x}{2}+\class{y}{2}=\class{z}{5}$$
<script>
$( '.x' ).html( '1' );
$( '.y' ).html( '2' );
$( '.z' ).html( '3' );
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
</script>

I've tried different commands, but none seems to work. ["Rerender", MathJax.Hub] just renders "2+2=5", so it seems like the .html() is reset:

<script>
MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
</script>

The wanted result would look somewhat like this (js omitted), where \class{x}{} (and others) may appear more than once in different places:

<span>You have chosen \(\class{x}{}\) and \(\class{y}{}\)</span>
$$\class{x}{}+\class{y}{}=\class{z}{}$$

Is there any way of rendering "1+2=3" this way? $( '.x' ) may be changed a number of times, not just once.

You might want to try to provide a proper example. Your first code block contains both DOM content (the TeX string) and JavaScript code; this doesn't make a lot of sense. My guess would be that you'd like to have the typesetting finish before running the jquery code (else there's no element anywhere with those classes). — Peter Krautzberger, Aug 04 '16 at 06:27
@PeterKrautzberger The TeX string do contain elements with those classes, and .html() does replace the symbol inside those classes; it is however unrendered. The point is that once I try to "Rerender", the .html() is reset... — Frank Vel, Aug 04 '16 at 13:57
Again, a self-contained example using snippets or jsbin showing what you have so far would be a good idea. — Peter Krautzberger, Aug 04 '16 at 16:51
This is the documentation you are likely looking for, but I still struggled to get things to work as individual elements on the page (even when I used \cssId instead of \class. https://docs.mathjax.org/en/v2.5-latest/typeset.html — ventaur, Aug 05 '16 at 22:45
Frank you should start with ventaur's link to the MathJax documentation; it's the correct place to start. In short, you cannot change the output of MathJax like this. Instead, you need to modify the input and re-render that. Since you use LaTeX input, all you have is strings and so DOM-like approaches cannot work. You might find MathML as an input for MathJax easier (since you could use some DOM methods) but you'll still have to do the bookkeeping for the changing input in your application logic. — Peter Krautzberger, Aug 09 '16 at 07:19
@PeterKrautzberger MathML syntax is horrid, so I'd like to see if there's a way without it, but if there are no other possibilities, I'll sure look into it. — Frank Vel, Aug 10 '16 at 13:47
Do you mean, when you click on #num and change the html value, it not updating the formula image ? — Mohit Tanwani, Aug 10 '16 at 14:09
@MohitTanwani Yes. The new formula image should be rendered in MathJax, but when I attempt to rerender(), the formula is reset instead of updated. — Frank Vel, Aug 10 '16 at 15:07
could you please try with this line MathJax.Hub.Queue(["Typeset", MathJax.Hub, 'MathJax_Display']); — Mohit Tanwani, Aug 11 '16 at 11:05
@MohitTanwani https://jsfiddle.net/wpmddjyr/ it doesn't seem to work... — Frank Vel, Aug 11 '16 at 16:24
Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down/ for migration tips. — Peter Krautzberger, Apr 12 '17 at 07:49

score 6 · Answer 1 · answered Aug 11 '16 at 19:39

6

Frank, use the following code:

HTML:

<html>
<head>

<script
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
</head>
<body>

<div id="formula"></div>

A: <input type="text" id="valueA">
B: <input type="text" id="valueB">
C: <input type="text" id="valueC">

<p><input type="button" value="Update" onclick="DynamicMJ.update()" /></p>

<script>
var DynamicMJ = {
  formula: document.getElementById("formula"),

  update: function () {
    var a = document.getElementById("valueA").value;
        b = document.getElementById("valueB").value;
    var c = document.getElementById("valueC").value;
    var tex = "\\frac{"+a+"}{2}+ \\frac{"+b+"}{2} = \\frac{"+c+"}{5}";
    this.formula.innerHTML = "\\["+tex+"\\]";
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.formula]);
  }
};
DynamicMJ.update();
</script>

</body>
</html>

EXPLANATION:

You need to use an HTML element(div in this example) in order to write the values, and then you can insert the values of the textboxes directly into the formula.

Hope this helps!

answered Aug 11 '16 at 19:39

Joel Hernandez

2,195
1
13
17

This is close, but the variables may appear in different divs/spans, so I'd like to avoid id's if possible, to avoid making too many functions for each one. – Frank Vel Aug 11 '16 at 22:47
I can't accept this as an answer as it's not complete, but I figure you deserve the bounty. Your answer still made me see how I can proceed. – Frank Vel Aug 13 '16 at 18:47
1

Thanks Frank, I am glad to help. Maybe if you modify your html, you can figure out the right formula construction... – Joel Hernandez Aug 15 '16 at 15:20
1

Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down/ for migration tips. – Peter Krautzberger Apr 12 '17 at 07:49

Rendering MathJax updated with .html()

1 Answers1