load Mathjax after loading javascript

Question

here is my simple HTML code

<html>
<head>
<script type="text/javascript"
 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
</script>
</head>
<body>
<p>This is the line that load correct  \[ \frac{x+y}{z} \]</p>
<p id="step1"></p>
<script>
var x = gup('x');
var y = gup('y');
var z = gup('z');
var text = "This is the line that NOT show correct" + "\[ \frac{" + x + " + " + y + "}{" + z +"}\]";
document.getElementById("step1").innerHTML= text;
</script>
</body>
</html>

when I load this html file and send parameters by url like

sample.html?x=1&y=2&z=3

the first sentence shows correct form and load Mathjax but the second sentence NOT. it is because Mathjax load before the java script code. do you know how to load Mathjax after Javascript?

Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down for migration tips (and perhaps update your post for future readers). — Peter Krautzberger, Apr 21 '17 at 07:44

alexandernst · Accepted Answer · 2012-09-27T14:25:16.787

2

You can try using a JavaScript loader with a callback to load MathJax and run your code in the callback. See https://github.com/niftylettuce/javascript-async-callback for example.

EDIT:

<html>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
</script>

<script>
$(function() {
  var x = gup('x');
  var y = gup('y');
  var z = gup('z');
  var text = "This is the line that NOT show correct <-- It's OK now" + "\\[ \\frac{" + x + " + " + y + "}{" + z +"} \\]";
  document.getElementById("step1").innerHTML= text;
});
</script

</head>
<body>
<p>This is the line that load correct  \[ \frac{x+y}{z} \]</p>
<p id="step1"></p>
</body>
</html>

edited Sep 27 '12 at 14:25

answered Sep 27 '12 at 12:42

alexandernst

14,352
22
97
197

Who exactly didn't worked? It throw some error maybe? Please paste the code you wrote to test it. – alexandernst Sep 27 '12 at 13:35
I added this line on header and after the javascript part of body i added but it not eve show me the "alert" did I inserted in wrong place? – nfarshchi Sep 27 '12 at 13:53
You're supposed to use the library I have you but write your own code, not just copy/paste the demo :s . Anyways, I just tested your code and it works properly. What's the exact problem? Because I can see all the variables that are parsed from the location. – alexandernst Sep 27 '12 at 13:59
yes variables are in the place it is not my problem, after inserting them i should re run mathjax to show them in formula way. because mathjax run before java the variables will not show in proper way – nfarshchi Sep 27 '12 at 14:01
sorry for copy pasting the demo but if the demo even would work i could see the alert and after that i should mix it with my code. am i right? – nfarshchi Sep 27 '12 at 14:02
Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down for migration tips (and perhaps update your post for future readers). – Peter Krautzberger Apr 21 '17 at 07:45

Davide Cervone · Answer 2 · 2012-09-29T20:36:19.870

If you modify the document to add mathematics after MathJax has run, you need to tell MathJax to run again. You do that using

<script>
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

See the relvent MathJax documentation for details.

In your case, this should do it:

<script>
var x = gup('x');
var y = gup('y');
var z = gup('z');
var text = "This is the line that NOT show correct" + "\[ \frac{" + x + " + " + y + "}{" + z +"}\]";
document.getElementById("step1").innerHTML= text;
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"step1"]);
</script>

load Mathjax after loading javascript

2 Answers2

Linked