•  17-01-2022
  •  | 
  •  

Question

I have many different MathJax formulas that are going to be dynamically moved around different lists on the webpage. I am trying to control this with JQuery and the append attribute.

In my script file I have various arrays of formulas and then a function that lists the formulas in the array inside of a specified div using .append. Here's the code:

function listArray(array,div){
  for(var i=0; i<array.length; i++){
    $('#'+div).append('<li>'+array[i]); 
  }
};

I am having the problem that MathJax typesets the math before this script runs and so the appended formulas don't display in TeX. Here is an example Fiddle:

http://jsfiddle.net/T8m64/92/

Does anyone know of a good fix for this? I have tried reading some of the documentation on re-typesetting MathJax, but I don't really follow it.

Was it helpful?

Solution

There are two problems with your fiddle example. First, the array of math expressions loses the backslashes, because these are used as escape characters in the javascript strings. You need to double them:

var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];

Second, you need to tell MathJax to process the mathematics once you have added it to the page. Use 

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

after appending the math in order to do that.

Version 120 of you fiddle shows a working version.

OTHER TIPS

I ran some tests as updates /93, /94, /95 of your fiddle, and found that the rendered formulas could be moved around but the whole thing was fragile. Sometimes a simple change or just a page refresh would cause the unrendered formulas to show, each one doubled-up, which I can't explain.

As you will see, I thought a setTimeout would fix things but now I don't think that's the case.

I think the bug is just a feature of running the code in jsFiddle. I can't induce the bug when running the code in a test page served locally under file:// protocol from my own computer and viewed in Opera.

Here's my test page :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<style type='text/css'>
    body {
    margin: 10px;
}
.jax {
    display: none;
}
#list1, #list2 {
    margin: 10px 0;
    padding: 5px;
    border: 1px solid #000;
}
</style>

<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
    $(".jax").each(function(i, j){
        var li = $("<li/>").append($(j).text());
        $ul.append(li);
    });
};

//move formulas from original spans into list1
listArray($("#list1") );

//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
    $("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
    $("#list1 li").eq(0).appendTo($("#list2"));
});

});
</script>


</head>
<body>
  <head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
    <span class="jax">\(\mathbb{Q}\)</span>
    <span class="jax">\(\mathbb{Z}\)</span>
    <ul id="list1"></ul>
    <button id="moveDown">Move Down</button>
    <button id="moveUp">Move Up</button>
    <ul id="list2"></ul>
</body>

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top