Hiding content until MathJax is complete

Question

My website has a good amount of MathJax, and I am using the following code to prevent certain objects from being visible on the page until all of the MathJax formulas have been rendered.

$("#myDiv").load('@Url.Action("ActionResultMethod", "ControllerName",{controller parameters})', function () {
  MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"myDiv"],
    function () {
      $("#myDiv").fadeIn(300); 
    }
  );
});

In particular, I have a div with the ID myDiv, and the page loads with its display set to none. The code above makes the div fade in when MathJax has finished rendering.

I copied this code from here.

It is working perfectly, but now when I inspect an element on my page I see the following error in the console.

http://www.mywebsite.com/@Url.Action(%22ActionResultMethod%22,
Failed to load resource: the server responded with a status of 404 (Not Found)

Note: I have replaced my actual website url with mywebsite.com.

Can anyone tell me why this is happening and how to fix it? To reiterate, the code seems to be working perfectly, and I don't detect any problems. I just see this error.

You can see this in action in the following Fiddle. If you inspect an element on the page you'll see the same error in the console.

EDIT: I would also be interested to know if anyone has a way to accomplish this same task with MathJax, but without using @Url.Action, as it seems to be the thing causing problems.

Answer 1

After playing around I realized that the code I copied is good, but the @Url.Action part is unnecessary for what I am trying to do.

In particular, I just deleted everything around MathJax.Hub.Queue, as well as the part in brackets. So the code is now just:

MathJax.Hub.Queue(
  function () {
    $("#myDiv").fadeIn(300); 
  }
);

This seems to be working just as well, and I don't have the error message in the console. See Fiddle.

All in all this seems like a pretty good solution for using jQuery to delay displaying an object until after MathJax has rendered.