I am using MathJax to typeset equations on my webpage. On loading the webpage for first time everything works fine.On clicking "NEXT" button, equation inside the div changes (ajax call), but it shows up as 'raw TEX' i.e. Mathjax isn't typesetting it the second time. The related code is as follows:
MARKUP AND SCRIPT
<div class="div_body" id="ques_dashboard">
<p>When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</p>
</div>
<div class="div_footer">
<a href="#" class="button ryt_btn" id="answer_submit">SUBMIT</a>
<a href="#" class="button ryt_btn" id="next_q">NEXT</a>
<a href="#" class="button ryt_btn" id="skip_q">SKIP</a>
</div>
<script>
$(document).ready(function(){
$('#next_q').click(function(){
$("#next_q").hide();
$('#answer_submit').show();
$("#skip_q").show();
$.ajax({
type: 'POST',
url: '../ajax/next_question.php',
//data:{queslist:queslist, current_qorder:current_qorder},
success: function(msg){
$('#ques_dashboard').html(msg);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,'ques_dashboard']);
}
});
return false;
});
});
</script>
PHP CALLED BY AJAX
<?php?>
<p> If \\(a, b, c\\) are in HP, then \\(\\frac {1}{a}, \\frac {1}{b}, \\frac {1}{c}\\) are in AP</p>
I have presented here simplified codes, which include lots of php and mysql. I am successfully able to show the "next question" but unable to typeset using Mathjax. I have tried using MathJax.Hub.Queue
function.
I am new to jquery and ajax. Please help.
I was able to track down the problem with the help of Julien. The code snippet given below was interfering with typeset after ajax call.(This Queue function hides text till the typeset is done.)
MathJax.Hub.Queue(function () {
document.getElementById("hide_page").style.visibility = "";});
Commenting this portion solved the problem.
Will update answer in case I find a way to use ajax and "hide until typeset" feature together.