Need insert of mathcode in Table element

aheight · Sep 22, 2016

Hi,
I have an HTML table and would like to insert mathcode into one of the rows after the page is loaded according to external data in files I'm loading. I've included script for MathJax and I'm trying to use:

document.GetElementbyId("testInsert").innerHTML=

but cannot get it to work with something like:

document.GetElementbyId("testInsert").innerHTML=$x^2$;

And was wondering if I was doing something wrong or if someone could help me?

Below is a simple file I'm testing the code with. In my web page, I am reading a file containing a latex string for an equation and would like to then display the equation on the web page. Is this even possible? In the code below, I'm trying to insert the mathcode in the table data with id="testInsert".

JavaScript:

<!DOCTYPE html>
<html>
    <head>
             <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
//
// script for mathjax
//
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>       
       
    <script type="text/javascript">
        function webGLStart() {
   
//
// now attempt to insert math code in one of the table data elements:
//
       document.getElementById("testInsert").innerHTML=$x^2$;
     
     }

   </script>
       
    </head>
  
          
<body onload="webGLStart();">
      
    <table id="table1">

    <tr>
    <tr>
        <td id="testInsert">
            this is a taest
        </td>
    </tr>
        <td>
             <canvas id="lesson02-canvas" width="600"
            height="600" style="border:1px solid #000000;"></canvas>
        </td>
        <td class="head1" >
            <p class="heading1" > Drag to rotate.  Use mouse wheel to zoom.</p>
      
            <table id="table2"  >
               
                <tr>
                  <td class="ring1" id="checkInsert">
                     
                        Ring 1: <input type="checkbox"  id="ring1"
                                       checked="checked" name="ring1" />
                
                </tr>
               
            </table>
        </td>
           
    </tr>  
    </table>
    
    
</body>
   
  
</html>

QuantumQuest · Sep 22, 2016

aheight said:

Hi,
I have an HTML table and would like to insert mathcode into one of the rows after the page is loaded according to external data in files I'm loading. I've included script for MathJax and I'm trying to use:

document.GetElementbyId("testInsert").innerHTML=

but cannot get it to work with something like:

document.GetElementbyId("testInsert").innerHTML=$x^2$;

And was wondering if I was doing something wrong or if someone could help me?

Below is a simple file I'm testing the code with. In my web page, I am reading a file containing a latex string for an equation and would like to then display the equation on the web page. Is this even possible? In the code below, I'm trying to insert the mathcode in the table data with id="testInsert".

When you insert anything you have to be careful about how you do this. Can this be inserted as it is or it needs something that we use all the time?

aheight · Sep 22, 2016

QuantumQuest said:

When you insert anything you have to be careful about how you do this. Can this be inserted as it is or it needs something that we use all the time?

Hi Quantum,
Thanks for replying. Did some more researching and found this at the mathjax website:

https://docs.mathjax.org/en/v2.5-latest/typeset.html

This describes how to update the math code after mathjax has rendered the page. I render the page first, read in my JSON data file with the string defining the latex code for the function, then update it as per the description above. Note that I have to add double backslashes in the latex code since a backslash is a command. Here is how I formatted the latex in Mathematica to JSON format:

Code:

"functionName":"$f(z,w)=\\frac{16}{81} e^{-\\frac{2 i \\pi }{3}} \\left(-w^2+\\frac{4}{9} e^{-\\frac{2 i \\pi }{3}}\\right)^4-\\frac{16}{81} e^{\\frac{2 i \\pi }{3}} w^4 \\left(1-\\frac{4}{9} e^{\\frac{2 i \\pi }{3}} w^2\\right)^4 z=0$"

And here is how I load the latex code from the JSON file and then update the web page with the rendered latex:

JavaScript:

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           myArr = JSON.parse(this.responseText);
           realData=myArr.theRealData;
           imagData=myArr.theImagData;
//
// get function name here;
//
           theFunctionName=myArr.functionData.functionName;
//
// now update math code for this table field
//

       document.getElementById("functionName").innerHTML=theFunctionName;
      MathJax.Hub.Queue(["Typeset",MathJax.Hub,"functionName"]);
   
      webGLStart()
           
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
  
   
}

And here is how it looks on the web page:

https://dl.dropboxusercontent.com/s/a0jvpumfrkd9e30/index.html?dl=0

QuantumQuest · Sep 22, 2016

aheight said:

Hi Quantum,
Thanks for replying. Did some more researching and found this at the mathjax website:

https://docs.mathjax.org/en/v2.5-latest/typeset.html

This describes how to update the math code after mathjax has rendered the page. I render the page first, read in my JSON data file with the string defining the latex code for the function, then update it as per the description above. Note that I have to add double backslashes in the latex code since a backslash is a command. Here is how I formatted the latex in Mathematica to JSON format:

And here is how I load the latex code from the JSON file and then update the web page with the rendered latex:

And here is how it looks on the web page:

https://dl.dropboxusercontent.com/s/a0jvpumfrkd9e30/index.html?dl=0

Trying to visit the above url, browser gives me warning about not safe location. Anyway, my point was about your question that ##x^2## is not inserted. This is fixed in just a simple step.

aheight · Sep 22, 2016

QuantumQuest said:

Trying to visit the above url, browser gives me warning about not safe location. Anyway, my point was about your question that ##x^2## is not inserted. This is fixed in just a simple step.

Yes. I'm aware that message is given. Not sure why on some setups and not others. Depends on browser settings I guess.

QuantumQuest · Sep 22, 2016

aheight said:

Yes. I'm aware that message is given. Not sure why on some setups and not others. Depends on browser settings I guess.

Yes and also to some strict MS policies, that nevertheless are proven very useful many times. But did you get my point about the answer?

aheight · Sep 22, 2016

QuantumQuest said:

Yes and also to some strict MS policies, that nevertheless are proven very useful many times. But did you get my point about the answer?

I assume you meant the mathjax expressions I used above (and also documentation states that I could have only used one command but that would have re-rendered the whole document).

Code:

 document.getElementById("functionName").innerHTML=theFunctionName;   
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"functionName"]);

Was that not the case? Basically I'm amazed I can get even this far with the code as it's all still very new to me. :)

QuantumQuest · Sep 22, 2016

aheight said:

I assume you meant the mathjax expressions I used above:

Was that not the case?

No. I mean how you insert something into your table cell. In the wrong way, nothing is inserted and remains "this is a taest" as is written. The right way it becomes ##x^2##.

aheight · Sep 22, 2016

QuantumQuest said:

No. I mean how you insert something into your table cell. In the wrong way, nothing is inserted and remains "this is a taest" as is written. The right way it becomes ##x^2##.

Is not the document.getElementbyID("testfield").innerHTML=

the correct way to do this? It does seem to be working the way I coded it above.

QuantumQuest · Sep 22, 2016

aheight said:

Is not the document.getElementbyID("testfield").innerHTML=

the correct way to do this? It does seem to be working the way I coded it above.

It is the correct way in this specific case, but in general, you have to check for cross-browser issues when you're utilizing DOM. Now, I'm trying to point you in the right direction to find the problem yourself. So, again, can the string you're trying to insert, be inserted as it is or it needs something to be added?

aheight · Sep 22, 2016

QuantumQuest said:

It is the correct way in this specific case, but in general, you have to check for cross-browser issues when you're utilizing DOM. Now, I'm trying to point you in the right direction to find the problem yourself. So, again, can the string you're trying to insert, be inserted as it is or it needs something to be added?

Not sure what you mean. The latex string(s) I'm intending to add to my JSON files for the function I plan to completely format in Latex including the dollar signs. So for example, my JSON file would include a line:

"functionData": {
"functionName": "$\\frac{x}{y}$"
}

so then I could simply read in the entire JSON file via:

myArr = JSON.parse(this.responseText);

then update the table element in my web-page via:

document.getElementById("functionName").innerHTML=myArr.functionData.functionName;

this I assume now has the completely-formatted latex command in the table element now so that I can then re-render just this field:

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

Is there a better way to do this?

QuantumQuest · Sep 22, 2016

aheight said:

Not sure what you mean. The latex string(s) I'm intending to add to my JSON files for the function I plan to completely format in Latex including the dollar signs. So for example, my JSON file would include a line:

"functionData": {
"functionName": "$\\frac{x}{y}$"
}

so then I could simply read in the entire JSON file via:

myArr = JSON.parse(this.responseText);

then update the table element in my web-page via:

document.getElementById("functionName").innerHTML=myArr.functionData.functionName;

this I assume now has the completely-formatted latex command in the table element now so that I can then re-render just this field:

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

Is there a better way to do this?

I don't talk about the way you do it. The way is OK. I just return to the code you posted in your first post. There, if you run it through your browser like it is, the string "$x^2$" is not inserted at all. So, to expand, no string can be inserted like this. Why? You must add something to this string, in order to be inserted. It is something very very common, that we all overlook at times. It has nothing to do with the libraries you include or the way you do it. It is a pure HTML matter. To help you further, there is no need to add other variables, code, special symbols and what not. In order for ##x^2## to display instead of remaining "this is a taest", one simple thing is missing from your string. There is no hint beyond these but giving you the answer. But this is no good and won't help you either. It is extremely simple to find it yourself.

aheight · Sep 22, 2016

QuantumQuest said:

I don't talk about the way you do it. The way is OK. I just return to the code you posted in your first post. There, if you run it through your browser like it is, the string "$x^2$" is not inserted at all. So, to expand, no string can be inserted like this. Why? You must add something to this string, in order to be inserted. It is something very very common, that we all overlook at times. It has nothing to do with the libraries you include or the way you do it. It is a pure HTML matter. To help you further, there is no need to add other variables, code, special symbols and what not. In order for ##x^2## to display instead of remaining "this is a taest", one simple thing is missing from your string. There is no hint beyond these but giving you the answer. But this is no good and won't help you either. It is extremely simple to find it yourself.

Oh, I see what you mean: I needed to enclose the string in quotes like:

document.getElementById("testInsert").innerHTML="$x^2$"

QuantumQuest · Sep 22, 2016

aheight said:

Oh, I see what you mean: I needed to enclose the string in quotes like:

document.getElementById("testInsert").innerHTML="$x^2$"

As you found the problem, I can tell you that I tested with single quotes and worked fine. Always keep in mind such issues. As a web developer, you will find them a lot of times.

Need insert of mathcode in Table element

1. What is the purpose of inserting mathcode in a Table element?

2. How do I insert mathcode in a Table element?

3. Can I use any type of mathcode in a Table element?

4. How do I ensure that the inserted mathcode is displayed correctly in a Table element?

5. Is it possible to insert mathcode in a Table element in a responsive manner?

Similar threads

Hot Threads

Recent Insights