Mathjax not working in Ajax based web page

Question

I'm using Mathjax to display equations in a web application done in PHP/Ajax. The equations are rendered correctly when the page is loaded first.In the same page, when user clicks a button, an ajax code works to fetch some data from database and display it on the same page.But, there the equations are not displaying correctly, instead the latex code is shown as such.But if i refresh the page, then the equations are rendered correctly.How can i solve this issue?

Bedrabble

Answer 1

See the MathJax documentation on modifying math on the page for details.

Malathion

I got the solution from the given page.Thanks. – Bedrabble

updated link: docs.mathjax.org/en/latest/… – Cerated

The first link gives the answer + explanation. the bottom line - add MathJax.Hub.Queue(["Typeset",MathJax.Hub]); in the ajax created page. – Sclar

The solution as after ajax return success function set this line of code: if(typeof MathJax !== 'undefined') {MathJax.Hub.Queue(["Typeset",MathJax.Hub]);} – Brittain

Answer 2

This has changed in the latest version of Mathjax: Here is my code that worked:

   $(function () {
    $("button").click(function () {
      event.preventDefault();
      $.ajax({
        url: "/test/Template",
        data: $("form").serialize(),
        type: "POST",
        dataType: "html",
        success: function (data) {
          $("#Output").css("display", "");
          $("#Output").html(data);
          MathJax.typeset();
        },
        error: function (error) {
          console.log(error);
        },
      });
    });

  });

Honea