Mathjax & Ajax

[Randeep Singh]

Hi,

I have a page HTML page, that loads Mathjax, uses it and prints out
some equations.

I have an external PHP script.

When a user selects an option in a dropdown list an AJAX call is made
to the external PHP script. The external PHP script echos some data
back and a div is updated to show this data.

The problem is I want the PHP script to return some MathJax. Normally
this is fine, but I think because I'm doing an AJAX call that even
though it returns stuff like $$x^2$$ it is output as $$x^2$$ instead
of as actually x squared because, I think, the Mathjax stuff has
already run once and doesn't know to run again because of the AJAX
call.

I've tried putting the AJAX script in the PHP and echoing it out but
it doesn't seem to work.

Can anyone help please? Thanks in advance.

Randeep.

[Frédéric WANG]

Hi,

This page from the documentation should help you:
http://www.mathjax.org/docs/1.1/typeset.html

--
Frédéric Wang.
Website - Weblog

[Randeep Singh]

Thank you Frédéric, I will take a read. I may be back with more
questions though!!

Thanks.

> Fr�d�ric Wang.
> Website <http://www.maths-informatique-jeux.com/> - Weblog
> <http://www.maths-informatique-jeux.com/blog/frederic/>

[leathrum]

I was just about to post the very same link. You need to issue a
"Typeset" call on the MathJax queue to get your div to be retypeset
with the new content. You don't give enough specifics about your page
code for me to tell you exactly what that call should look like, but
read the page at the link and it should give you an overview of what
you need to do.

[Randeep Singh]

Thanks leathrum. I can see the code:

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

If I echoed this out from PHP, would this work, or does it need to be
in a script tag at all? I'm happy to re-type-set the entire page at
the moment but need to understand what I need to put into the PHP that
I call using AJAX, where I put the responsetext in a div.

Sorry, I'm a bit confused.

Thanks!

[Frédéric WANG]

mmh, I'm guessing that should be in a javascript code executed when the
Ajax response arrives. (I'm not sure whether the code echoed from your
PHP script is executed when the Ajax response arrives...)

[Randeep Singh]

Thank you Frédéric, this works, but my custom configuration for
MathJax seems to be lost? Only the inline stuff properly displays, the
displaymath doesn't (I use a custom @@ delimiter).

Is this common?

[Randeep Singh]

Sorry that is the wrong way around, only my displaymath is working not
the inline math in the ajax called code?!?

I am confused.

[Frédéric WANG]

Sorry, I don't have in mind the exact MathJax processing sequence and
don't know your code either. Can you please describe more precisely the
code in your page?

On 11/01/2012 23:37, Randeep Singh wrote:
> Sorry that is the wrong way around, only my displaymath is working not
> the inline math in the ajax called code?!?
>
> I am confused.
>
> On Jan 11, 10:35 pm, Randeep Singh<cloudt...@gmail.com> wrote:

>> Thank you Fr�d�ric, this works, but my custom configuration for

[Randeep Singh]

Yeah sure.


HTML PAGE
Mathjax script & config.

<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax:
{inlineMath: [['%','%'], ['\\(','\\)'], ['££','££']],displayMath: [ ['$
$','$$'], ['\[','\]'], ['@@', '@@']]}});</script>

I have a dropdown textbox. When the value is changed it calls a
function from functions.js.

Then I have a div with id detail.


FUNCTIONS.JS
I take the input from the dropdown list. I pass this to a PHP function
that outputs some Mathjax and other stuff. This is done via using the
responsetext.value and it updates the div with detail id.

I have then put this in my function:

detailDiv = document.getElementById("description");
detailDiv.innerHTML = request.responseText;
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

PHP
simply returns some mathjax and html based on what was selected in
dropdown list in HTML.





All of the MathJax in the original HTML renders fine. All of the
displaymath in the dynamic MathJax that I pass back using the function
and PHP renders fine. But the inline MathJax, with my custom delimiter
"££" does not render at all. And shows as ? symbols in a black
diamond?!

Thanks again for your help and time.

[Randeep Singh]

Hi,

I think I know the problem.

I call MathJax.Hub.Queue(["Typeset",MathJax.Hub]); in my code, but I
think I need to call:


(function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js";

var config = 'MathJax.Hub.Config({' +
'extensions: ["tex2jax.js"],' +
'jax: ["input/TeX","output/HTML-CSS"]' +
'});' +
'MathJax.Hub.Startup.onload();';

if (window.opera) {script.innerHTML = config}
else {script.text = config}

document.getElementsByTagName("head")[0].appendChild(script);
})();


But I'm stumped how I add in my configuration, it seems to break the
code, I need to add in:

[Randeep Singh]

There is something wrong with my attempt but I don't know what :( :

function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {

detailDiv = document.getElementById("description");
detailDiv.innerHTML = request.responseText;

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

(function () {
var script = document.createElement("script");
script.type = "text/javascript";

script.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?
config=TeX-AMS-MML_HTMLorMML";

var config = 'MathJax.Hub.Config({' +
'extensions: ["tex2jax.js"],' +

'tex2jax: {inlineMath: [[\'%\',\'%\'], [\'\\(\',\'\\)\'], [\'££\',
\'££\']],displayMath: [ [\'$$\',\'$$\'], [\'\[\',\'\]\'], [\'@@\', \'@@
\']]},' +

[Davide P. Cervone]

No, no, no! You were right the first time. Adding
MathJax.Hub.Queue(["Typeset",MathJax.Hub]) call was the correct thing
to do. You do NOT want to add scripts to reload all of MathJax each
time your ajax script runs.

The fact that most of the math was being processed shows that the
MathJax Typeset() call was working. The problem appears to be with
the delimiters you are using. I suspect that there is an encoding
issue and that your ajax script is not getting the pound symbol (₤)
to your web page properly. (If I understand correctly, Javascript
uses UTF-16 encoding, but perhaps you are getting UTF-8 from the php
script?) The fact that you are seeing diamond-with-question-marks
instead of pound-currency-symbols suggests that they are not being
transferred or inserted correctly. You need to check that what you are
getting from the script actually includes the pound signs (try
console.log(request.responseText) and see if it has the pound sign).

Can you use something else to delimit the mathematics? Something that
is in the lower 256 characters rather than unicode U+20A4? Is there a
reason that you need to use three different sets of delimiters for
each type of mathematics?

Davide

[Randeep Singh]

Again Davide you are a genius! Changing the ££ delimiter to %% fixes
the problem entirely. Problem solved - its weird with programming how
you can be so close to the answer and yet go around in a massive
circle and find you had only a small error initially!

Thanks to all of you for all your help - it is very greatly
appreciated!!

Randeep.

[Davide P. Cervone]

OK, glad you got it resolved. Best of luck with the project.

Davide