Q&Aデータベースから"$x^2-5x+6=0$"のようなtex記法の文字列を取得し、mathjaxによって数式表記をブラウザに表示させたいと思っています。
データベースからデータを取得してくる部分が非同期処理になっており、この部分にmathjaxが適用されません（htmlにベタ書きしてある<div>$x^2$</div>の部分は綺麗に累乗表記され、表示されています）。
onload関数で表示したい部分に代入しているのですが、この部分が数式表示になりません。
解決できる手段があればアドバイスをいただけると幸いです。
よろしくお願いします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>API test</title> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- API用SDK --> <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script> <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script> <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script> <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script> <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script> <script type="text/javascript" src="lib/url-template/url-template.js"></script> <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script> <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script> <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script> <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script> <script type="text/javascript" src="apigClient.js"></script> <!-- mathjax --> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" }}, tex2jax: { inlineMath: [ ['$','$'], ["\(","\)"] ], processEscapes: true }, "HTML-CSS": { matchFontHeight: false }, displayAlign: "left", displayIndent: "2em" }); </script> </head> <body> <!-- HTML --> <button id="btn">問題を表示する</button> <div>問題</div> <div id="output"></div> <div id="mathjax"></div> <div>$x^2$</div> <!-- Other Script --> <script type="text/javascript" type="text/x-mathjax-config"> var params = {}; var body = { "OperationType":"QUERY", "Keys": { "questionID": "q002", "sortID": "s001", "unit": "hello", "value": 100 } } var additionalParams = {}; var apigClient; var apigClient = apigClientFactory.newClient(); $(function(){ //API Clientを初期化 apigClient = apigClientFactory.newClient(); apigClient.dynamodbctrlPost(params, body, additionalParams) .then(function(result){ console.log('POST is sucessful') console.log(result) console.log(result.data) console.log(result.data.Items) console.log(result.data.Items[0].unit) var questionText = result.data.Items[0].unit onLoad(); function onLoad() { target = document.getElementById("output"); target.innerHTML = questionText; }; // Add success callback code here. }).catch( function(result){ // Add error callback code here. }); }); </script> </body> </html>
回答3件
0
非同期処理の.thenのあとのlonload()のあとにmathjaxを呼ぶように変更しました。
その際には以下のような
function appendScript(URL) { var el = document.createElement('script'); el.src = URL; document.body.appendChild(el); };
scriptタグを埋め込む関数を作成し、Promiseの処理内でonload()後にmathjaxのCDN（https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML）を参照するようにしました！
投稿2020/09/12 02:38
総合スコア1
0
非同期処理の.thenのあとのlonload()のあとにmathjaxを呼ぶように変更しました。
その際には以下のような
function appendScript(URL) { var el = document.createElement('script'); el.src = URL; document.body.appendChild(el); };
scriptタグを埋め込む関数を作成し、Promiseの処理内でonload()後にmathjaxのCDN（https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML）を参照するようにしました！
投稿2020/09/12 02:32
総合スコア1
0
自己解決
mathjaxのCDN先のURLを公式ホームページのものに変えるとできました！
なぜできたかはなぞです..
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
投稿2020/09/12 02:19
総合スコア1
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。