1

I try to make dynamic page that needs to load math symbol lazily, and so I need to call MathJax after all my math symbol has finished being loaded. I tried to read MathJax doc and found this: http://docs.mathjax.org/en/latest/advanced/typeset.html but when I did as it told, I get "ReferenceError: MathJax is not defined" error in console. How can I solve this? Here's my html code:

    <!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" id="MathJax-script" async
                                       src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
        </script>
    </head>
    <body>

        <div id="main" class="container">
            <p>\(A \cup B\)</p>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
        </script>
        <script>
            $(document).ready(function () {
                $("#main").append("<p>\\(A \\cup B\\)</p>");
                MathJax.typeset();
            })
        </script>
    </body>
</html>
samcarter_is_at_topanswers.xyz
  • 33,336
  • 5
  • 41
  • 62
user312781
  • 41
  • 5

1 Answers1

1

Cause

By specifying async in your <script> tag, you are loading the MathJax-script in an asynchronous way, meaning your browser is downloading the MathJax library in background, while it continues to execute the rest of the page's content.

Chances are that your document is ready, so your browser executes the call MathJax.typeset(); before it finishes loading the library, causing this unknown reference error.

Suggestions

You can remove the async property, to force the browser to load the library first, then execute the rest of the scripts.

Or you can use defer property, to asynchroneously load the scripts and ensure that the scripts are executed in the right order (they rely on each other).

Related topics you might be interested in:

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-async
Script Tag - async & defer
Async and document ready
async="async" attribute of a <script> tag in html, What does it mean?

Adri1
  • 311
  • 1
  • 5