JavaScript Need insert of mathcode in Table element

  • Thread starter Thread starter aheight
  • Start date Start date
  • Tags Tags
    Element Table
AI Thread Summary
The discussion centers on inserting LaTeX math code into an HTML table cell using MathJax after the page loads. The user initially struggles with the syntax, specifically using `document.GetElementbyId("testInsert").innerHTML=$x^2$;`, which fails to render the expected output. It is clarified that the string must be enclosed in quotes for proper insertion, such as `document.getElementById("testInsert").innerHTML="$x^2$"`. Further, the user learns about the need to update the MathJax rendering after modifying the HTML content. They explore loading LaTeX strings from a JSON file and updating the table cell accordingly, ensuring to format the LaTeX correctly with double backslashes where necessary. The conversation emphasizes the importance of syntax and proper string formatting in JavaScript and HTML, as well as the need to re-render MathJax to display the updated math correctly.
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
Views
4K
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
JavaScript Changing textContent color in table at run time
Replies
12
Views
3K
Java How to communicate between javascript and php?
Replies
21
Views
6K
HTML/CSS Python - HTML : Isn't this a dictionary ?
Replies
2
Views
1K
Java Problem working with multi-dimensional arrays in Javascript
Replies
3
Views
2K
Java Solve Javascript Problem: 2 Dropdowns Menus
Replies
6
Views
3K
Mathematica How to type mathematical equations using LaTeX
Replies
3
Views
2K
Different Button Background and Text Colors
Replies
4
Views
2K
Solving Expandable Content Box Issue in Programming Forum
Replies
4
Views
2K

Hot Threads

Recent Insights

Back
Top