Scala.js button reloading mathjax

Question

I have a scala function creating a math expression as a string like $\log((3+x))$ each time I click on a button. I would like mathjax to be called at each click as well to allow it to render a new expression.
I've read that there is something like MathJax.Hub.Queue but how to use it with scala.js.

My HTML file :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Differantiator</title>
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 </script>
<script type="text/javascript" async
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 </script>
</head>

<body>
  <form>
   Your expression to be differentiated:<br><br>
     <input type="text" name="expr" id="nodeValue">
     <input type="button"  onclick="addClickedMessage()"
           value="Differentiate!" id="click-me-button">
   </form> 
 <!-- Include Scala.js compiled code here -->
 <!-- Include JavaScript dependencies -->
  <script type="text/javascript" src="./target/scala-2.12/scala-js-tutorial-fastopt.js"></script>
 </body>
</html>

and my scala file with Op, Func, Rpn objects giving strings :

package example

import org.scalajs.dom
import dom.document
import dom.html
import scalajs.js.annotation.JSExport
import scalatags.JsDom.all._
//import org.scalajs.jquery.jQuery
import scala.scalajs.js.annotation.JSExportTopLevel
import utils.Func
import utils.Rpn
import utils.Op

object App {
  def appendPar(targetNode: dom.Node, text: String): Unit = {
  val parNode = document.createElement("p")
  val textNode = document.createTextNode(text)
  parNode.appendChild(textNode)
  targetNode.appendChild(parNode)
 }

@JSExportTopLevel("addClickedMessage")
  def addClickedMessage(): Unit = {
  val expr:String = document.getElementById("nodeValue").asInstanceOf[html.Input].value.toString
  appendPar(document.body, "The expression is $" + Op.show(Rpn.rpnToFunc(expr)) + "$")
  appendPar(document.body, "The derivative is " +
  "$" +Op.show(Op.deriv(Rpn.rpnToFunc(expr), Func.Var("x")))+ "$")
  }

  def main(args: Array[String]): Unit = {
    addClickedMessage()
  }
 }

sjrd · Accepted Answer · 2018-01-31 19:55:08Z

2

The easiest way (excluding using js.eval() which is frowned upon in Scala.js) is to use js.Dynamic:

import js.Dynamic.{global => g}

g.MathJax.Hub.Queue(js.Array("Typeset", g.MathJax.Hub))

answered Jan 31, 2018 at 19:55

sjrd

22.2k2 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gee · Accepted Answer · 2018-01-29 11:43:37Z

0

OK, well, it was simple...just adding

 js.eval("MathJax.Hub.Queue([\"Typeset\",MathJax.Hub])")

does the trick

answered Jan 29, 2018 at 11:43

gee

948 bronze badges

Collectives™ on Stack Overflow

Scala.js button reloading mathjax

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related