How to use MAthjax with ajax

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"]);             
    }'  )

));

Solution

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>