TypeError: Cannot read property 'style' of null problem

[Youngho Cho]

Hello,

I got following error

TypeError: Cannot read property 'style' of null
    at MathJax.Hub.Register.StartupHook.MML.mtable.Augment.toCommonHTML (jax.js?rev=2.5.3:1089)
    at MathJax.Hub.Register.StartupHook.MML.mbase.Augment.CHTMLaddChild (jax.js?rev=2.5.3:535)

with some test tex likes 'f(x) = \begin{cases} \frac{{e^{3x}}-1}{x(e^x + 1)} & (x \ne 0)\cr a & (x=0)\end{cases}'
( some test tex has no problem )

if I render it within normal div, there is no problem.
But If I render it within contenteditable div which is in an iframe, then above error happened.

if I put

1089      var rbox = row.CHTML, rspan = row.CHTMLspanElement();
+            if(!rspan){
+               continue;
+           }
            rspan.style.verticalAlign = ralign;

than looks like rendering is ok.

Is there any hint why those kind of behavior happend ??


Thanks,

Youngho

[Davide P. Cervone]

Can you provide a live example of this using codebin or jsFiddle?  It is difficult to tell what is happening without more detail concerning your setup.

The rspan = row.CHTMLspanElement() is looking up an element in the DOM by id, and the fact that rspan is null suggests that it is not finding that element.  That element SHOULD exist, so the failure says something bad has happened. Simply skipping the rest of the code, as your "solution" does will cause some TeX expressions to not render properly, so this is not a real solution.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Youngho Cho]

Hello Davide,

Yes, I suspected that the rspan should be exists also.

I setup the test at the fiddle

http://jsfiddle.net/youngho/yw0cmmh6/

This test will work with chrome, safari on Mac, and chrome, safari,
explore11 on Win7
and you can see [Math Processing Error]

and also this test page show another problem with firefox,
If you see this test page with firefox, the rendering nodes rendered
exactly and then removed.
But at this moment, this issue is not higher priority than the [Math
Processing Error] issue.

Please let me know some light.


Thanks,

Youngho

> You received this message because you are subscribed to a topic in the

> Google Groups "MathJax Users" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/mathjax-users/1OKO21eJnfE/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

[Davide P. Cervone]

Thank you for the live sample. That makes things much clearer.

The problem is this: MathJax can process mathematics only within the document where MathJax was loaded. An iframe creates its own private document that is separate from the one in the main page, and you are trying to have MathJax work within that private document from outside the iframe. There are several technical reasons why this doesn't work, and you are running into one of them. MathJax sometimes needs to look up an element by ID (as it does in your case), and it uses document.getElementById() to do it; but here the document is the outer document, not the document of the iframe; but there is no element with that id in the outer document (the math is in the iframe's document), so it is getting a null pointer rather than the pointer to the element. There are also several other reasons you can't cross document boundaries (e.g., the stylesheets created by MathJax are in the outer document, not the if ram document, so the needed CSS is not being applied).

In order to use MathJax inside an iframe, you need to load MathJax into that iframe, not the main document. I am not familiar enough with the dojo packages that you are using to tell you how to do that, but you need to load MathJax into the editor when it is initialized, and the placed you are now calling MathJax would need to be changed to refer to the MathJax that is within the iframe.

Hope that helps.

Davide

[Youngho Cho]

Hello Davide,

I loaded MathJax from the editor iframe as described in the MathJax
document (Loading MathJax Dynamically)

and I encountered several problems.

With chrome, I got following error

Error {message: "Can't make callback from given data"} "Error: Can't
make callback from given data
at Error (native)
at USING (http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML:19:5383)
at BASE.Object.Subclass.Push
(http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML:19:8191)
at Object.MathJax.Hub.Queue
(http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML:19:33923)
at declare.render (../../../easydesk/math/mathjax/_MathJaxMixin.js:84:38)
at eval (../../../easydesk/editor/plugins/MathJaxEditor.js:178:30)
at lang.hitch (../../../dojo/_base/lang.js:386:55)

WIth firefox or IE,
and this issue is not a MathJax issue exactly I think,
I don't know how to get MathJax object from the iframe

for the above error,
Is there any more treatment except the MathJax document ?
or do I have to more carefully treat component loading sequence ?
or other problem happens here ?

and Is there any document to access MathJax object in the iframe ?


Thanks,

Youngho

[Davide P. Cervone]

Again, a live example would help. Your message doesn't include enough information to tell what you have done.

The fact that you are getting this error means that MathJax has at least loaded, and (probably) that you have been able to make a call to it. The source of the problem is probably a call to

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

that is in the outer window but directed to the iframe. There reason that this may be a problem is that the array ["Typeset",MathJax.Hub] is created in the outset window, and so is not recognized as an array inside the iframe (which has its own Array object, and so "A instanceof Array" performed within the iframe will fail if A is an array created in the outer window).

One solution would be to use

w.MathJax.Hub.Queue(new w.Array("Typeset",w.MathJax.Hub));

where "w" is the window within the iframe (I assume you have already located that via the iframe's contentWindow).

Another would be to create a function IN THE IFRAME such as

function Typeset(node) {MathJax.Hub.Queue(["Typeset",MathJax.Hub,node])}

on have the code in the outer window call w.Typeset(node) rather than call MathJax directly.

Hope those help.

Davide

[Youngho Cho]

Hello Davide,

Now I understand what the problem was.

Your second suggesion

"function Typeset(node) {MathJax.Hub.Queue(["Typeset",MathJax.Hub,node])}"

works perfectly at the chrome.

I am not sure other brower(at least IE and Firefox) can be handled as
easily or not

But any way, I am very appreciate your kind response.

Thanks a lot.

Youngho

[Youngho Cho]

Hello Davide,


Now MathJax works perfectly in the iframe with all chrome, FF, IE
browsers by applying your recommendation.

Thanks again,

Youngho

[Davide P. Cervone]

Glad it worked out for you. Can you post a working example of your final solution, so others can take advantage of what you have learned?

Davide

[Youngho Cho]

Hello Davide,

At this moment, I have some problem to load our easydesk module to
jsfiddle with dojo cdn.

So I prepare the test page in our website.

http://www.easydesk.co.kr/project/demo/template/MathJax.html

The dojo package is same as the latest release version.

I am working on a dijit/Editor plugin (
'easydesk/editor/plugins/MathJaxEditor' ) for MathJax rendering in the
editor editArea and back to tex source for 'EasyDesk' service.
( It has a lots of bug in there curretly but this topic issue is
solved by your support )

For the FireFox and IE trouble as I mentioned before,

The problem was that I tried to touch iframe MathJax object before the
iframe contentWindow prepare properly.

So I touch the iframe MathJax Object after the iframe contentWindow
preparation finished using
'dojo/Deferred'


Thanks,

Youngho