Mathjax not rendering jquery equation-CodePudding

I have the code linked here ->https://jsfiddle.net/jw7g21p4/4/ but it's not working as I hoped.

I have two scripts for MathJAX linked in the html header, one comes from the MathJAX website (currently commented out) and is supposed to provide the latest version. The other I found on someone else's post and is an older version of MathJax. The script from MathJAX doesn't render when the input values update, but it looks nicer before changing values. The second script does re-renders when input values update but the render doesn't look as nice.

Try both of the scripts below to test - pay attention to the sqrt symbol.

Any suggestions for getting the MathJAX script library to re-render on input value change like the second script does?

  $(document).ready(function (e) {
    $('#d_i').on('input', function () {
      calculate();
    });

    $('#phi_v_w').on('input', function () {
      calculate();
    });

    $('#e').on('input', function () {
      calculate();
    });

    function calculate() {
      var n1 = parseFloat($('#d_i').val());
      var n2 = parseFloat($('#phi_v_w').val());
      var n3 = parseFloat($('#e').val());
      var a4 = "";
          a4 = ((2*n1*n2) /Math.sqrt(1   Math.pow((6 * n3) / n1,2))).toFixed(2) ;
      
      $('#V_a').html(
        "$$\\begin{aligned}"   
        "V_a &= { {2 \\cdot d_i \\cdot \\phi v_w} \\over { \\sqrt{ 1   \\Large \\left[ {6 \\cdot e} \\over { d_i } \\right]^2 }}} "  
        "\\"  
        ("\\ &= { {2 \\cdot d_i \\cdot \\phi v_w} \\over { \\sqrt{ 1   \\Large \\left[ {6 \\cdot XE} \\over { d_i } \\right]^2 }}}").replaceAll("d_i",n1).replaceAll("\\phi v_w",n2).replaceAll("XE",n3)  
        "\\"  
        "\\ V_a &= "  a4  " \\ kN"  
        "\\end{aligned}$$"
      )

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

    };

    calculate();
  });

<html>

<head>
  <title>JS   MathJax TeX Test Page</title>
  
  <!-- <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script> -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <main>
        <section >
      <p>


                <table >
                    <tr>
                        <th>Parameter Name</th>
                        <th>Symbol</th>
                        <th>Value</th>
                        <th>Units</th>
                    </tr>
                    <tr>
                        <td>Plate height</td>
                        <td>\( d_i \)</td>
                        <td ><input type='text' id="d_i" /></td>
                        <td>\( mm \)</td>
                    </tr>
                    <tr>
                        <td>Design capacity of weld per unit length</td>
                        <td>\( \phi v_w \)</td>
                        <td ><input type='text' id="phi_v_w" /></td>
                        <td>\( kN/mm \)</td>
                    </tr>

                    <tr>
                        <td>Load Eccentricity</td>
                        <td>\( e \)</td>
                        <td ><input type='text' id="e" /></td>
                        <td>\( mm \)</td>
                    </tr>

                </table>
    </section>
    <br>

      <section >
        <div  id="V_a">         </div>

      </section>

  </main>
</body>

</html>

CodePudding user response：

I realised that I need to replace the line: "MathJax.Hub.Queue(["Typeset",MathJax.Hub,'V_a']);" with "MathJax.typeset()" in my jQuery for version 3.x.x MathJAX.

CodePudding user response：

You may want to use

MathJax.startup.document.clearMathItemsWithin(['#V_a']);
MathJax.typeset(['#V_a']);

in order to avoid accumulating pointers to older versions of the equations that are no longer on the page, and to only typeset the container for the update math rather than the entire document.