CODEWITHSUNDEEP
jqueryhtmldomcallbackmathjax
peterxz
peterxz

Reputation: 874

MathJax: Can't make callback from given data when trying to rerender math

I have a <textarea class="edit"> and a <div class="preview">. .edit is used for inputting a string and or math, which is then basically copied over to .preview, but obviously I want to process maths and output as LaTeX in .preview.

I have the following code:

$("textarea.edit").on('keyup', function() {
    var parent = $(this).parent().parent();
    var value = $(this).val();

    var found = false;

    //If any variables are found in this string, then
    //generate number and replace all instances
    variables.forEach(function(self) {
        var contains = value.indexOf(self["name"]);
        if(contains != -1) {
            found = true;
            var num = generateRandomVar(self);
            console.log(num);
            //Add MathJax delimiters to empty strings
            //So when this is processed, MathJax identifies this as LaTeX number
            value = value.replaceAll(self["name"], "$$" + num + "$$");
        }
    });

    //Set preview
    //Call mathjax to re-process this
    parent.find("div.preview").html(value);
    if(found === true) {
        //Convert jQuery element to DOM elem as MathJax takes pure JS elems
        var container = parent.find("div.preview")[0];
        updateMathContent(container);
    }   
}
function updateMathContent(s) {
    var math = MathJax.Hub.getAllJax(s)[0];
    //x+1 as test?
    MathJax.Hub.Queue(["Text", math, "x+1"]);
}

However, I keep getting "can't make callback from given data" for some reason. I realise an argument must be wrong but can't work out what - even using the documentation. I used examples from the documentation as well but I can't make it work. What am I doing wrong? Thanks

Upvotes: 3

Views: 407

Answers (1)

Davide Cervone
Davide Cervone

Reputation: 12250

Because you call updateMathContent() directory after changing the HTML, MathJax has not processed the new HTML, and so it has not located any math in the new material, and there are no jax in the container whose contents you just changed. So var math = MathJax.Hub.getAllJax(s)[0]; means that math is undefined. Your invocation to MathJax.Hub.Queue(["Text", math, "x+1"]); tries to call the Text() method of the math object, but since it is undefined, there is no such method. That is the source of the error you are getting. If you change the definition of upateMathContent() to 

function updateMathContent(s) {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, s]);
}

that should typeset the modified contents of the container.

Upvotes: 1

Related Questions