I am trying to make a website where pressing a button loads a formula written in latex in a different html file in my current html file. But when i do this i only get the latex code and not the formula. I have tried to use MathJax.typeset() but it does not work. Sometimes it works for a split second when i am constantly pressing the button, but turns back to latex right after. This is the main file called index.html. I have used jquery to load the file just because it is easier.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>index</title>
</head>
<body>
<button onclick="loadHTML('test1.html')">Press for formula</button>
<div id="content" class="content">Formulas coming here</div>
</body>
</html>
<script>
function loadHTML(filename){
let file = `formulas/${filename}`
$("#content").load(file);
MathJax.typeset();
};
</script>
and the test1.html file including the formula (inside a folder i have called "formula")
$$a = {b \over c}$$
The jQuery load() function is asynchronous, so even though it completes and goes on to the next line in your code, that doesn't mean the file has actually been loaded, so you are calling MathJax.typeset() before the new content is in the page. You can pass a callback function to load() that is called when the page has been updated. Use that to call MathJax.typeset():
function loadHTML(filename){
let file = `formulas/${filename}`
$("#content").load(file, function () {
MathJax.typeset();
});
};