Render mathjax dynamically (ajax/php)

Question

I am trying to make an automatic preview for math equations. Basically, the user would input an equation in a text box and it would show up beneath, all prettied up in LaTEX with mathjax. I used this example as a model http://www.w3schools.com/ajax/ajax_aspphp.asp

because I am calling a python script from php to modify the user input before i display it. Problem is, it is not rendering properly for me. Instead of rendering, it shows the raw TEX (e.g. $x^2$).

I've seen the mathjax help page on this and I put the line of code at the bottom of mine, but it still doesn't render, like it does here: http://jsfiddle.net/Zky72/2/.

I saw this question Rendering user input from dynamically created textarea using MathJax (which seems similar), but he sort of vaguely answers his own question.

Here is my code:

script:

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","preview.php?text="+str,true);
xmlhttp.send();

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

html:

<form> 
    Preview: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

Long story shorts, I can call the python just fine and i can refresh the mathjax just fine, just not together. Thanks in advance for any help. I feel bad asking such a specific question with so many resources, but I've been banging my head against a wall for a while over this one.

hobbs hobbs · Accepted Answer · 2013-06-09T22:16:04

You're doing async wrong. Don't put the MathJax.Hub.Queue call at the end of your function after you send the request; put it at the end of your success callback, after you receive the response and update the contents of the text box. That way, MathJax will actually have something to render.

Render mathjax dynamically (ajax/php)

2 Answers