Good morning, how can render div with mathjax after ajax data is inserted into it? I have read some posts but could not find :(. It is working only one time. second and third time not working. I have tried also to put
MathJax.Hub.Queue(["Typeset",MathJax.Hub, "test"]);
after and before ajax insertion.
$this->widget('bootstrap.widgets.TbButton', array(
'htmlOptions' => array('id'=> 'start'),
'buttonType'=>'ajaxButton',
'type'=>'primary',
'label'=>'Start',
'url'=>CController::createUrl('site/next'),
'ajaxOptions'=>array(
'type'=>'post',
'data'=>array('row'=>$row),
'success'=>'function(data){
$("#test").html(data);
MathJax.Hub.Queue(["Typeset",MathJax.Hub, "test"]);
}' )
));
I don't think its a specific MathJax issue. The following code creates a a one line input form and dynamically takes the mathml code in it and renders that with mathjax. This works fine with repeated inputs, so the MathJax.Hub.Queue(["Typeset",...) part works fine. Try adding an alert(data) in your ajax code to check you are being given the correct input from ajax.
<!doctype html>
<html>
<head>
<title>Creating mathml from expressions</title>
<script src="../MathJax/MathJax.js">
MathJax.Hub.Config({
extensions: ["mml2jax.js"],
jax: ["input/MathML","output/HTML-CSS"]
});
</script>
<script type="text/javascript">
<!--
function render()
{
var res = document.getElementById('equation').value;
alert(res);
var target = document.getElementById('outputDiv');
target.innerHTML=res;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,'outputDiv']);
}
// -->
</script>
</head>
<body>
<h1>MathML to MathJax<h1>
<form>
<input type="text" id="equation" size="100" value="<math><msup><mi>x</mi><mn>2</mn> </msup></math>"/>
<input type="button" value="Render" onClick="render();"/>
</form>
<div id="outputDiv" style="border:1px; font-size:x-large;">
</div>
</body>
</html>