Need insert of mathcode in Table element

  • Context: JavaScript 
  • Thread starter Thread starter aheight
  • Start date Start date
  • Tags Tags
    Element Table
Click For Summary

Discussion Overview

The discussion revolves around inserting mathematical code into an HTML table element using MathJax after the page has loaded. Participants explore methods for dynamically updating content based on external data, specifically focusing on the correct syntax and approach for inserting LaTeX formatted equations.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Exploratory

Main Points Raised

  • One participant expresses difficulty in using document.GetElementbyId("testInsert").innerHTML=$x^2$; to insert LaTeX code and seeks assistance.
  • Another participant suggests that care must be taken when inserting content and questions whether the insertion can be done as is or requires additional formatting.
  • A participant references MathJax documentation, indicating that updating math code after rendering is possible and describes the need for double backslashes in LaTeX strings.
  • There is a discussion about loading LaTeX code from a JSON file and updating the webpage accordingly, with a specific example of how to format the LaTeX string.
  • Some participants note issues with accessing a shared URL, indicating potential browser security warnings.
  • There is a contention regarding the correct method for inserting LaTeX code into the table cell, with one participant asserting that the original method does not work as intended.
  • Another participant expresses amazement at their progress with the coding task, indicating it is a new area for them.

Areas of Agreement / Disagreement

Participants do not reach a consensus on the correct method for inserting LaTeX code into the HTML table cell. Disagreements exist regarding the effectiveness of the proposed code snippets and the proper approach to achieve the desired outcome.

Contextual Notes

Participants highlight the importance of syntax and formatting when working with MathJax and LaTeX, noting that incorrect methods may lead to the original content remaining unchanged.

aheight
Messages
318
Reaction score
108
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>
 
Technology news on Phys.org
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?
 
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
 
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.
 
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.
 
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?
 
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. :)
 
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##.
 
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.
 
  • #10
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?
 
  • #11
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?
 
  • #12
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.
 
  • #13
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$"
 
  • #14
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.
 

Similar threads

Java Javascript multiplication tables
  • · Replies 9 ·
Replies
9
Views
4K
HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
JavaScript Changing textContent color in table at run time
  • · Replies 12 ·
Replies
12
Views
4K
Java How to communicate between javascript and php?
  • · Replies 21 ·
Replies
21
Views
6K
HTML/CSS Python - HTML : Isn't this a dictionary ?
  • · Replies 2 ·
Replies
2
Views
2K
Java Problem working with multi-dimensional arrays in Javascript
  • · Replies 3 ·
Replies
3
Views
2K
Java Solve Javascript Problem: 2 Dropdowns Menus
  • · Replies 6 ·
Replies
6
Views
3K
Mathematica How to type mathematical equations using LaTeX
  • · Replies 3 ·
Replies
3
Views
2K
Different Button Background and Text Colors
  • · Replies 4 ·
Replies
4
Views
2K
Solving Expandable Content Box Issue in Programming Forum
  • · Replies 4 ·
Replies
4
Views
2K