Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

JavaScript Need insert of mathcode in Table element

  1. Sep 22, 2016 #1
    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".


    Code (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>
     
     
  2. jcsd
  3. Sep 22, 2016 #2

    QuantumQuest

    User Avatar
    Gold Member

    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?
     
  4. Sep 22, 2016 #3
    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 (Text):
    "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:

    Code (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
     
  5. Sep 22, 2016 #4

    QuantumQuest

    User Avatar
    Gold Member

    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.
     
  6. Sep 22, 2016 #5
    Yes. I'm aware that message is given. Not sure why on some setups and not others. Depends on browser settings I guess.
     
  7. Sep 22, 2016 #6

    QuantumQuest

    User Avatar
    Gold Member

    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?
     
  8. Sep 22, 2016 #7
    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 (Text):

     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. :)
     
  9. Sep 22, 2016 #8

    QuantumQuest

    User Avatar
    Gold Member

    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##.
     
  10. Sep 22, 2016 #9
    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.
     
  11. Sep 22, 2016 #10

    QuantumQuest

    User Avatar
    Gold Member

    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?
     
  12. Sep 22, 2016 #11
    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?
     
  13. Sep 22, 2016 #12

    QuantumQuest

    User Avatar
    Gold Member

    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.
     
  14. Sep 22, 2016 #13
    Oh, I see what you mean: I needed to enclose the string in quotes like:

    document.getElementById("testInsert").innerHTML="$x^2$"
     
  15. Sep 22, 2016 #14

    QuantumQuest

    User Avatar
    Gold Member

    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.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted



Similar Discussions: Need insert of mathcode in Table element
  1. Writing a Table (Replies: 6)

  2. Matlab and tables (Replies: 0)

Loading...