Render Mathjax Formula in a dynamically rendered element

Iswarya Rajagopal

unread,

Mar 7, 2012, 12:57:18 AM3/7/12

to mathja...@googlegroups.com, leat...@jsu.edu

Hi,

I am trying to render Mathjax in a dynamically rendered element. The error that I am getting is "Uncaught Error: Can't make callback from given data". The code works fine for elements that are already present as part of the page. The problem occurs only for dynamically rendered elements. Given below is the code:

<html>

<head>

<title>Interactive MathML display</title>

MathJax.Hub.Config({

extensions: ["mml2jax.js"],

jax: ["input/MathML", "output/HTML-CSS"]

});

</script>

</head>

<body>

window.onload = function()

{

var parent = document.getElementById("thisdiv");

parent.innerHTML = "<div id=\"thisdivchild\" onclick=\"dothis(\'thisdivchild\')\">hello click here.</div>";

}

window.dothis = function (element) {

var QUEUE = MathJax.Hub.queue;

var math = null;

QUEUE.Push(function () {

math = MathJax.Hub.getAllJax(element)[0];

});

window.ShowMath = function (MathML) {

QUEUE.Push(["Text",math,MathML]);

}

ShowMath('<math><mi>x</mi><mo>=</mo><mrow><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi></mi><mi></mi></msqrt></mrow><mrow> <mn>2</mn><mi>a</mi> </mrow></mfrac></mrow><mtext>.</mtext></math>');

}

</script>

<p>

Formula: <math></math>

</div>

</body>

</html>

Pls help.

Iswarya.R

Davide P. Cervone

unread,

Mar 7, 2012, 8:49:08 AM3/7/12

to mathja...@googlegroups.com

The problem is that when you do

math = MathJax.Hub.getAllJax(element)[0];

there is no math in the element to get, and so math is given the null value. Then when you go to make the callback from ["Text",math,MathML], math is null, and this isn't a valid callback specification, so MathJax complains. The MathJax.Hub.getAllJax(element) call returns an array of ElementJax objects that correspond to the typeset mathematics within the element. Your element doesn't have any typeset math initially, so getAllJax() returns an empty array and getAllJax()[0] is a null object.

It is not clear what exactly you want to happen. If you are trying to replace the "hello click here" by the mathematics, then this isn't the way to go about it. In that case, your dothis() function should be something more like

window.dothis = function (element) {

if (typeof(element) === "string") {element = document.getElementById(element)}

element.innerHTML = '<math><mi>x</mi><mo>=</mo><mrow><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi></mi><mi></mi></msqrt></mrow><mrow> <mn>2</mn><mi>a</mi> </mrow></mfrac></mrow><mtext>.</mtext></math>';

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

}

Is that what you are trying to do?

Davide

Iswarya Rajagopal

unread,

Mar 8, 2012, 11:54:56 PM3/8/12

to mathja...@googlegroups.com

Hi Davide,

That solved my problem. Thank u so much.

Regards,

Iswarya.R

roshan.k...@gmail.com

unread,

Jun 30, 2016, 7:40:19 AM6/30/16

to MathJax Users

This helped me in 2016 . Thanks Davide .

Reply all

Reply to author

Forward