How to do math jax on whole page generated dynamically

[shadd]

i have a page that display data dynamically with  math/ latex got from db;

how can i display the latex well for this page dynamically generated.

<div class="que_text">1. how \(\underline{decent}\).ike.</div><div class="que_ans">what<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							<button class="Edit_ans">Edit answer</button></form>
                  			<form id="aQue1" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
						
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer><div class="que_text">2. John \(\underline{refused}\) that she had stolen his friend's money.</div><div class="que_ans">say<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							
							<button class="Edit_ans">Edit answer</button></form>	<form id="aQue2" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
							
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer>

 

[shadd]

31 minutes ago, shadd said:

i have a page that display data dynamically with  math/ latex got from db;

how can i display the latex well for this page dynamically generated.

<div class="que_text">1. how \(\underline{decent}\).ike.</div><div class="que_ans">what<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns1" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							<button class="Edit_ans">Edit answer</button></form>
                  			<form id="aQue1" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
						
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer><div class="que_text">2. John \(\underline{refused}\) that she had stolen his friend's money.</div><div class="que_ans">say<div class="icon tick "><i class="fas fa-check"></i></div>
			    </div>	<footer><form id="aAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="addAns">
							<button class="Add_ans">Add answer</button></form><form id="eAns2" method="POST" action="">
							<input type="hidden" name="sAction" value="editAns">
							
							<button class="Edit_ans">Edit answer</button></form>	<form id="aQue2" method="POST" action="">
						<input type="hidden" name="sAction" value="editQue">
							
							<button class="nxt_btn Edit_que" id="Edit_que">Edit / Add to Question</button></form>
							
						</footer>

 

All that latex code is generated dynamically from the database. i have tried this but all in vain so far

                <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <!-- Configuration of math jax -->
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'],  
                            ['\\(', '\\)']]
            },
            svg: {
                fontCache: 'global'
            }
        };
       // document.addEventListener('load', function(){
   // MathJax.typeset('que_text');
//})
        // MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       // $(document).on('load',function(e){
            //$(preview).html(e.target.value)
            //MathJax.typeset();});
        /*if (window.MathJax) {
  node = document.getElementByClass('que_text');
  MathJax.typesetPromise([node]).then(() => {});
}*/
    </script>

[shadd]

57 minutes ago, shadd said:

All that latex code is generated dynamically from the database. i have tried this but all in vain so far

                <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <!-- Configuration of math jax -->
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'],  
                            ['\\(', '\\)']]
            },
            svg: {
                fontCache: 'global'
            }
        };
       // document.addEventListener('load', function(){
   // MathJax.typeset('que_text');
//})
        // MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       // $(document).on('load',function(e){
            //$(preview).html(e.target.value)
            //MathJax.typeset();});
        /*if (window.MathJax) {
  node = document.getElementByClass('que_text');
  MathJax.typesetPromise([node]).then(() => {});
}*/
    </script>

when i put the latex direct into html, it renders well as above,but when i do this:

                       echo ' '.$Question.'</div>';

 

it fails. Why??

[gizmola]

What have you done to debug the javascript in the rendered page?

Small snippets of your code aren't helpful, especially when we have no idea what is actually being inserted into your database, or what that code looks like. 

In a situation like this I would certainly be using the developer tools/ javascript console/javascript debugger.  

[shadd]

i contacted  the math jax help /support and this is how it went:

OK, so this is a page constructed by PHP, and while the document is created on the fly, the actual page is static, in that the DOM isn't altered once it has arrived at the browser, correct?

 

That is different from what I thought you meant by "dynamic content", which usually means altering the DOM on the fly within the browser.  That would require using MathJax.typesetPromise().  Your situation should not.

 

So this leads to the question of whether the math is properly inserted into the page.  So when you say

 

echo '<div>'.$Question.'</div>'

 

what is the contents of $Question?  That may be the problem.  In particular, are you using $...$ or \(...\) for the math delimiters, and if the latter, are you sure the backslashes are properly in $Question?  Can you view the page source (not the DOM inspector, but the page source) and verify that the math delimiters and backslashes are correct in the document?

 

When you say "it fails", what does that mean?  Does it mean that the math is not processed at all, or does it typeset, but not correctly?

Davide(mathjax reply 1)

My response:

when i say it fails,i mean that the tex is not parsed at all and is displayed as it is in the browser.

 

When i view the page source,i see this

<div class="que_text">21. Our father <span>\</span>(<span>\</span>underline{refused}<span>\</span>) us to use the internet. </div> <div class="que_text">22. Parents should buy (underline{decent}) clothes for their children. </div> What could be th problem? I double backslashed the first question before saving to database in question 21 above,I did not save it inside a <span> ??Where did that <Span> come from??

In question 22 i only saved without double backslashes ?

where am i going wrong??

reply2

n question 22, MathJax will not see any math, because there are no \(...\) delimiters (the backslashes are missing on the delimiters, as well as from the \underline macro).  So that explains why you are not getting typeset math.  But the question is why have the backspaced been removed?  I don't see anything in your PHP code that would do that, but I'm not a PHP expert, and only scanned through it quickly.  My guess is that the backslashes aren't actually being saved in the database.  Either that, or whatever is setting up $this->view_data is removing them.  I don't have access to the code that handles either of those, so can't tell for sure.

 

In question 21, the <span>\</span>( will not be seen by MathJax as a math delimiter, so MathJax doesn't think there is any math in that question, either.  It is possible that these spans are due to MathJax's processing of escaped characters.  That is, if the original page included \\(\\underline{refused}\\), then MathJax would replace each of the three double backslashes by <span>\</span>, and that would account for the output you are seeing.  But "view source" should show \\(\\underline{refused}\\), not the spans, so either this is not the view source output, but actually the DOM output, or the browser's view source option isn't showing the original HTML file, as it should be.  Which browser are you using?

 

One experiment is to include

 

processEscapes: false,

 

in the tex section of your MathJax configuration, and see if that changes the page source for question 21 to be \\(\\underline{refused}\\) instead, as that would tell us that the spans are from MathJax.  If that's the case, then it means your question data include double backslashes instead of single backslashes.

 

So in both cases, it looks to me like the data from the database is in error (for 21, there are too many backslashes, and for 22, not enough).  So you will need to look into how the questions are stored in the database, or how the $this->view_data is populated from the database to see how backslashes are handled in your workflow.  That seems to be the source of the problem.

 

Davide(for mathjax)

my response:

Thanks for the explanation.

it was the way that i store the tex code in the databse which was the source of the problem.I edited it direct in phpMyadmin and

the tex was rendered very clearly .

steven