Output to higher or lower div

[Garnet Borch]

Hi there!

Basic idea: a user inputs latex code into a text box and has the math preview displayed in a div immidiately below. When the user is happy with the equation, he clicks a button and the equation is copied to an external content-editable div. Then the user can add another equation.
See attached file for code

Issue: If the "otherDiv" is above the "originalDiv" I get a console error of "TypeError: h.MathJax is undefined" and the preview is no longer displayed on the fly.

Does anyone know why this is?

[Davide P. Cervone]

> Issue: If the "otherDiv" is above the "originalDiv" I get a console error of "TypeError: h.MathJax is undefined" and the preview is no longer displayed on the fly.
>
> Does anyone know why this is?

Yes. The problem is that when you copy the HTML from the one div to the other, you create multiple elements with the same ID, which is not allowed in a web page. MathJax uses the ID's to identify the different math elements on the page, and uses those ID's to look up the math elements. When your copy is below the original, the browser locates the original first, and all is well, but when your copy is above the original, the browser locates the copy first. MathJax has stored additional data attached to the original elements that are not copied when you copy the HTML, so when MathJax gets the copy rather than the original, it can't find that information and you get the error message you are receiving. Things like event handlers also aren't copied when you copy the HTML, so you would lose the MathJax contextual menu, and would not be able to get the source code, for example.

What you should do is move not the HTML itself, but the original TeX code (and delimiters) to the new location, and re-typeset it in its new location. That will make sure it gets new ID's and is properly attached to the internal data that MathJax needs.

Davide

[Garnet Borch]

Spectacular! That makes a lot of sense. Thanks a bunch.

Garnet