jtlindsey
jtlindsey

Reputation: 4863

Mathjax not rendering equation unless page reloaded

Im using mathjax in my rails project via the CDN because of issues hosting it in my app.

I'm using mathjax with the following

<script type="text/javascript" src="http://www.hostmath.com/Math/MathJax.js?config=OK"></script>

There is one div element that renders a partial depending on what button the user clicks on the page. Partial "Other" has other stuff and partial "Math" has the math equation. There is a button for the corresponding partials.

The first time the user clicks "Math" all the equations in the math partial render properly. If the user clicks "Other" and then clicks "Math" again, the math equations are not rendered properly. Only raw math syntax showing.

I was reading that it may be because MathJax is typesetting only on page load but I don't understand why the formatting would change when the rendered partial changed.

So I added the following which I found online to test if it would solve my problem:

<script type="text/javascript">
  MathJax.Hub.Queue(
  ["resetEquationNumbers",MathJax.InputJax.TeX],
  ["Typeset",MathJax.Hub]
);
</script>

Now it works like I wanted. The user can click the buttons for the "Math" or "Other" partials in any order without reloading the page and the equations render properly.

The problem is I have a js error:

Uncaught ReferenceError: MathJax is not defined

How do use the above code (MathJax.Hub.Queue...) when MathJax is referenced via the CDN instead of my local server? I also don't understand why adding the above code fixed the problem when "MathJax" is undefined.

I think I need to configure a local configuration file to get around the issue based on what I read in the docs but I don't understand them. Can anyone help?

Here is the partial with the math equation

<div class="custom-in-page-pages-view">
  <div class="text-center">
    <h1>Part 1</h1>
    <h4>General 3d Motion Equation</h4><br><br>
  </div>

<math>
  <mrow>
    <mtext selected="true">r</mtext>
    <mo>=</mo>
    <mtext>r</mtext>
    <mtext mathvariant="italic">(t)</mtext>
    <mo>=</mo>
    <mtext mathvariant="italic">r</mtext>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext mathvariant="italic">r</mtext>
    </msub>
  </mrow>
</math>

<br>
<br>

<math>
  <mrow>
    <mtext>v</mtext>
    <mo>=</mo>
    <mtext mathvariant="italic">v</mtext>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext>r</mtext>
    </msub>
    <mo>+</mo>
    <mtext mathvariant="italic">r</mtext>
    <mfrac>
      <mtext mathvariant="italic">d&theta;</mtext>
      <mtext mathvariant="italic">dt</mtext>
    </mfrac>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext selected="true" mathvariant="italic">&theta;</mtext>
    </msub>
    <mo>+</mo>
    <mtext mathvariant="italic">r</mtext>
    <mfrac>
      <mtext mathvariant="italic">d&phiv;</mtext>
      <mtext mathvariant="italic">dt</mtext>
    </mfrac>
    <mtext mathvariant="normal">sin</mtext>
    <mtext mathvariant="italic">&theta;</mtext>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext mathvariant="italic">&phiv;</mtext>
    </msub>
  </mrow>
</math>

<br>
<br>

<math>
  <mrow>
    <mtext selected="true">a</mtext>
    <mo>=</mo>
    <mfenced open="(" close=")">
      <mrow>
        <mtext mathvariant="italic">a</mtext>
        <mo>-</mo>
        <mtext mathvariant="italic">r</mtext>
        <mo>&nbsp;</mo>
        <msup>
          <mfenced open="(" close=")">
            <mfrac>
              <mtext mathvariant="italic">d&theta;</mtext>
              <mtext mathvariant="italic">dt</mtext>
            </mfrac>
          </mfenced>
          <mn>2</mn>
        </msup>
        <mo>-</mo>
        <mtext mathvariant="italic">r</mtext>
        <mo>&nbsp;</mo>
        <msup>
          <mfenced open="(" close=")">
            <mfrac>
              <mtext mathvariant="italic">d&phiv;</mtext>
              <mtext mathvariant="italic">dt</mtext>
            </mfrac>
          </mfenced>
          <mn>2</mn>
        </msup>
        <mo>&nbsp;</mo>
        <msup>
          <mtext mathvariant="normal">sin</mtext>
          <mn>2</mn>
        </msup>
        <mtext mathvariant="italic">&theta;</mtext>
      </mrow>
    </mfenced>
    <mo>&nbsp;</mo>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext>r</mtext>
    </msub>
  </mrow>
</math>

<br>
<br>

<math>
  <mrow>
    <mo>+</mo>
    <mfenced open="(" close=")">
      <mrow>
        <mtext>r</mtext>
        <mfrac>
          <mrow>
            <msup>
              <mtext mathvariant="italic">d</mtext>
              <mn>2</mn>
            </msup>
            <mtext mathvariant="italic">&theta;</mtext>
          </mrow>
          <mrow>
            <mtext mathvariant="italic">d</mtext>
            <msup>
              <mtext mathvariant="italic">t</mtext>
              <mn>2</mn>
            </msup>
          </mrow>
        </mfrac>
        <mo>+</mo>
        <mtext mathvariant="italic">2v</mtext>
        <mfrac>
          <mtext mathvariant="italic">d&theta;</mtext>
          <mtext mathvariant="italic">dt</mtext>
        </mfrac>
        <mo>-</mo>
        <mtext mathvariant="italic">r</mtext>
        <mo>&nbsp;</mo>
        <msup>
          <mfenced open="(" close=")">
            <mfrac>
              <mtext mathvariant="italic">d&phiv;</mtext>
              <mtext mathvariant="italic">dt</mtext>
            </mfrac>
          </mfenced>
          <mn>2</mn>
        </msup>
        <mo>&nbsp;</mo>
        <mtext mathvariant="normal">sin</mtext>
        <mtext mathvariant="italic">&theta;</mtext>
        <mtext mathvariant="normal">cos</mtext>
        <mtext mathvariant="italic">&theta;</mtext>
      </mrow>
    </mfenced>
    <mo>&nbsp;</mo>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext selected="true" mathvariant="italic">&theta;</mtext>
    </msub>
  </mrow>
</math>

<br>
<br>

<math>
  <mrow>
    <mo mathvariant="italic">+</mo>
    <mfenced open="(" close=")">
      <mrow>
        <mtext mathvariant="italic">r</mtext>
        <mfrac>
          <mrow>
            <msup>
              <mtext mathvariant="italic">d</mtext>
              <mn>2</mn>
            </msup>
            <mtext mathvariant="italic">&phiv;</mtext>
          </mrow>
          <mrow>
            <mtext mathvariant="italic">d</mtext>
            <msup>
              <mtext mathvariant="italic">t</mtext>
              <mn>2</mn>
            </msup>
          </mrow>
        </mfrac>
        <mtext mathvariant="normal">sin</mtext>
        <mtext mathvariant="italic">&theta;</mtext>
        <mo>+</mo>
        <mtext>2</mtext>
        <mtext mathvariant="italic">v</mtext>
        <mfrac>
          <mtext mathvariant="italic">d&phiv;</mtext>
          <mtext mathvariant="italic">dt</mtext>
        </mfrac>
        <mtext mathvariant="normal">sin</mtext>
        <mtext mathvariant="italic">&theta;</mtext>
        <mo>+</mo>
        <mtext>2</mtext>
        <mtext mathvariant="italic">r</mtext>
        <mfrac>
          <mtext mathvariant="italic">d&theta;</mtext>
          <mtext mathvariant="italic">dt</mtext>
        </mfrac>
        <mfrac>
          <mtext mathvariant="italic">d&phiv;</mtext>
          <mtext mathvariant="italic">dt</mtext>
        </mfrac>
        <mtext mathvariant="normal">cos</mtext>
        <mtext mathvariant="italic">&theta;</mtext>
      </mrow>
    </mfenced>
    <mo>&nbsp;</mo>
    <msub>
      <mtext>&ecirc;</mtext>
      <mtext selected="true" mathvariant="italic">&phiv;</mtext>
    </msub>
  </mrow>
</math>

<br>


</div>




<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script type="text/javascript">
  MathJax.Hub.Queue(
  ["resetEquationNumbers",MathJax.InputJax.TeX],
  ["Typeset",MathJax.Hub]
);
</script>

This is to get past a issue I only see when testing in Chrome. I didn't see the problem that required the use of MathJax.Hub.Queue... when viewing code in Firefox and Safari.

Upvotes: 1

Views: 2230

Answers (1)

jtlindsey
jtlindsey

Reputation: 4863

I got an answer via the mathjax users group that worked. Here it is for the masses.

Replace

<script type="text/javascript">
  MathJax.Hub.Queue(
  ["resetEquationNumbers",MathJax.InputJax.TeX],
  ["Typeset",MathJax.Hub]
);
</script>

with

<script type="text/javascript">
if (window.MathJax) {
  MathJax.Hub.Queue(
    ["resetEquationNumbers",MathJax.InputJax.TeX],
    ["Typeset",MathJax.Hub]
  );
}
</script>

or simply

<script type="text/javascript">
if (window.MathJax) {
  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub]
  );
}
</script>

it is getting to the first bit before MathJax is loaded.

MathJax does load afterwards and renders your math OK (and doesn't need the above), without further error.

I would suggest trying either:

(1) Removing the "resetEquationNumbers, Typeset" bit, since it's not necessary and causing your error -Murray

and

the first time through (when MathJax hasn't been loaded), the calls aren't made (and they aren't needed on the first pass, as Murray points out), but the calls WILL be made on the second and subsequent times you press the "Part 1" button, where they are needed. Note that the resetEquationNumbers call is only needed if you are using automatic equation numbers or use the \label macro. But it doesn't hurt anything if you use it. -David

Special thanks to Davide Cervone and Murray from the mathjax google users group for helping me with this.

Upvotes: 1

Related Questions