Configuring MathJax on a dynamic page

[Jesper Böjeryd]

Hi,

I am using Jekyll on a website through Github Pages. Some content is loaded dynamically, and when I visit pages with math on them, they are not rendered until I refresh the page. After that everything looks perfect. I understand that I can use ``MathJax.typesetPromise()``, but I do not understand where to do it.

The dynamic content is only loaded once. I have looked at the "Processing User Input" at https://mathjax.github.io/MathJax-demos-web/, but I want to trigger the rendering automatically, not by pressing a button.

In the header of each page I have the following, and I hope I could just add something to it to schedule the processing of the dynamic content.

``

<script>
    MathJax = {
    tex: {
    inlineMath: [['$', '$']],
    tags: 'ams'
    }
    };
   </script>

   <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
   </script>

``

[Davide Cervone]

MathJax processes the page when it is first loaded, so if you load additional content, MathJax doesn't know that that has happened, and the math is not processed.  When the new content is added, you need to call MathJax.typesetPromise() at that point.  How you do that depends on how the content is loaded, and you don't say how that is being handled.  Generally, there should be a callback that you can supply to whatever code is loading the new content, and the MathJax.typesetPromise() should be added to that callback.  You will have to determine how that is done based on the mechanism you are using to load the dynamic content.

Perhaps if there was more detail about how the content is loaded, more could be said about where the MathJax function call should go.  But there is nothing in the MathJax configuration itself that would do that.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/c5395d80-bb84-4326-8b2b-9e401a11ea54n%40googlegroups.com.

[Jesper Böjeryd]

Thanks for getting back re this, I appreciate it.

I think I had misunderstood the meaning of "dynamic". The issue is in the Jekyll theme I am using. It sets an option "ajax_loading" to true in a .yml file and when I change it to "false", my math is rendered upon the first visit to each page with math on it (i.e., I do not have to refresh the page).

However, in other aspects, the website does not behave like it used to which I'll investigate further. Ideally, I should be able to set ajax_loading: True and still use Mathjax.

[Davide Cervone]

I think I had misunderstood the meaning of "dynamic". The issue is in the Jekyll theme I am using. It sets an option "ajax_loading" to true in a .yml file and when I change it to "false", my math is rendered upon the first visit to each page with math on it (i.e., I do not have to refresh the page).

By "dynamic" one usually means that parts of the page are loaded via special javascript functions that obtain HTML data without loading a while new page, and adds that HTML into the page that is already in the browser. "Ajax" is one method of doing that, so "ajax_loading" suggests that the main page is being modified by loading content dynamically via ajax calls.

MathJax runs initially when the page is loaded, but if content is added in this way, MathJax doesn't know about that, and so the math is not processed.  So when an ajax update is done to the page, you would need to tell MathJax to reprocess the page (or process the new portion) after it has been modified.

To do that, you would need to know when the ajax calls are being made and when the page is updated.  The theme you are using may provide a means of doing that, but I can't tell you what that is, as I don't know much about Jekyll or the theme that you are using.

A Google search did turn up the following

https://jekyll-theme-docs.github.io/docs/jquery/ajax/ajaxComplete

which may or may not be a method that you can use to tie into the dynamic updates on your page.  Something like

$(document).ajaxComplete(function(event, request, settings) {

    MathJax.typesetPromise();

});

might do it, or you might have to do something like

$(document).ajaxComplete(function(event, request, settings) {

    setTimeout(MathJax.typesetPromise, 100);

});

depending on when the ajaxComplete handler is called in relation to the updates to the page.

If that doesn't work, you may have to consult the documentation for the theme (or investigate the code that implements it) in order to figure out how to tie into the update process.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/629e69ed-6bb5-49b8-98ae-2726d41179fen%40googlegroups.com.

[Jesper Böjeryd]

Amazing! All I did was add

<script>
    $(document).ajaxComplete(function(){
        setTimeout(MathJax.typesetPromise, 500);
    });
</script>

at the bottom of my mathjax.html file (which loads MathJax and configures it) which is loaded by my default.html layout (a Jekyll thing, I believe). I increased the delay a bit because that seemed more robust.

When I debugged, I added a line above setTimeout a console.log message to be printed to ensure when ajaxComplete was fired. It happened when switching between pages, exactly when MathJax wasn't rendering the LaTeX code before.

Thank you so much for taking the time to help me! Super appreciated :D

[Naresh Patkare]

Hi,

I use 'Newspaper' theme and 'Simple Mathjax' plugin to render math. I have the same problem as that of you of dynamically content.

The following worked for you

<script>
    $(document).ajaxComplete(function(){
        setTimeout(MathJax.typesetPromise, 500);
    });
</script>

But I dont understand where to put this code so that problem gets resolve.

[Jesper Böjeryd]

Hi,

The repo can be found at https://github.com/bojeryd91/bojeryd91.github.io

So I have been modifying a template (that I bought), which is why the structure is what it is.

I store mathjax.html in my _includes and there is where I load several it and include the snippet of code you cited.

This is loaded to every page using the default template that is found in

_layouts/default.html

at the end of default.html it says

{% include mathjax.html %}

That is how the mathjax code is loaded.

I guess {% include mathjax.html %} could simply be replaced by the content of mathjax.html.

I hope this helps,

// Jesper

You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/iTjoHzPd388/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/a5803bea-8e89-4455-b20c-82ea630d8ca5n%40googlegroups.com.