Combining jQuery Mobile and MathJax on a mobile site?

Question

There seems to be some issues when combining MathJax and jQuery Mobile on the same page. Sometimes the MathJax renders correctly and other times it does not - and this can happen to the same page.

The HTML that loads both of them looks like this:

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'>
</script> 
<script type='text/javascript'
        src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js'>
</script> 
<link rel='stylesheet' type='text/css'
      href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' /> 
<script src='/beta/mathjax/MathJax.js'>
</script>

You can see an example page here: http://stackmobile.com/beta/math.stackexchange.com/questions/view/?id=47772

Edit: It seems to be a problem with MathJax not recognizing a new page being loaded via AJAX - here is an example that doesn't seem to work: http://stackmobile.com/beta/#/beta/physics.stackexchange.com/questions/view/?id=11678

Note that the page may display correctly for you... this seems to be hit and miss. Sometimes it displays, sometimes not. — Nathan Osman, Jun 29 '11 at 01:02
Just a note but jQM has release a beta version as well as using jQuery 1.6.x — Phill Pafford, Jun 29 '11 at 12:49
Hmm on the first example link I see the MathJax.js being loading in Chrome Dev Tools but on the second example it's not even listed in the header. How do you transition from page to page? — Phill Pafford, Jun 29 '11 at 12:57
@Phill: That's handled by jQuery Mobile. I think it uses AJAX somehow. — Nathan Osman, Jun 29 '11 at 16:23
Hmm if I modify the first URL with the second URL info it loads just fine: http://stackmobile.com/beta/physics.stackexchange.com/questions/view/?id=11678 How do you navigate from page to page? — Phill Pafford, Jun 29 '11 at 17:03
@Phill: Well, it seems like jQuery Mobile fetches the next page via AJAX and inserts it into the DOM followed by a transition. — Nathan Osman, Jun 29 '11 at 17:06
Take a look at: http://jquerymobile.com/demos/1.0b1/docs/pages/docs-pages.html Local, internal linked "pages" as it's the hash /#/beta/ being added to your URL that's breaking the MathJax library from being added — Phill Pafford, Jun 29 '11 at 17:36

score 0 · Accepted Answer · answered Jun 30 '11 at 05:13

Well I found a solution... and it goes something like this:

First assign unique numbers to the pages. Since these pages are generated in PHP, this can be accomplished by using uniqid().

Assign the following function the the pageshow event:

$('#page_id').live('pageshow', function(event, ui) {
    var script = document.createElement('script');
    script.type   = 'text/javascript';
    script.src    = 'path_to_mathjax/MathJax.js';
    script.onload = callback;
    document.getElementsByTagName('head')[0].appendChild(script);
});

This loads MathJax and inserts it into the DOM - this script should be included within the page element. Also note that we mention a 'callback'. This will be called when the script loads.

This function (the callback) needs to go outside of any pages. This will prevent it from being included twice after a new page is loaded.
```
var mathjax_loaded = false;
function callback()
{
    if(mathjax_loaded)
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    else
    {
        MathJax.Hub.Startup.onload();
        mathjax_loaded = true;
    }
}
```
There's a lot here. First of all, we keep track of whether this callback has been called once before. If not, we tell MathJax to parse the page as if it were invoked from the window.onload event. If this has already happened (and we're on a new page) then we simply need to have MathJax run through the new page.

I'm probably missing something and there may be a better way of doing this. But I haven't found any other way that works.

score 0 · Answer 2 · edited May 23 '17 at 11:55

Not sure if this is easier/better way to add a script but here is what I found:

(Untested) Maybe (using your post: Combining jQuery Mobile and MathJax on a mobile site?)

$('#page_id').live('pageshow', function(event, ui) {
    $.getScript('http://path_to_mathjax/MathJax.js', function() { 
        callback(); 
    });
});

var mathjax_loaded = false;
function callback()
{
    if(mathjax_loaded)
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    else
    {
        MathJax.Hub.Startup.onload();
        mathjax_loaded = true;
    }
}

Combining jQuery Mobile and MathJax on a mobile site?

2 Answers2