0

I'm having trouble using jQuery to retrieve a HTML string retuned by Django. In a Django template I have the line

{{ generated_files.exercise_instructions.content | safe}}

which when expanded contains the string 2. Määritä luvun <span class="inline-math"> -6 </span> vastaluku., as shown in the picture below:

Expanded JSON(?) string.

I would like to be able to use KaTeX to render the contents of the span element as math, but

$(".inline-math").each(
        function(i, element) {
          console.log("Rivimatikkaa: " + element.innerHTML);
          katex.render(element.innerHTML,element);
        }
      );

does nothing towards this end. The span element of class inline-math is not detected by jQuery, as the console.log(element.innerHTML) does nothing, nor is the math rendered.

My question therefore is, how do I detect a string, that contains LaTeX returned by Django, in order to render it as math using KaTeX?

P.S.

As an interesting sidenote, here are pictures of the page source with and without the safe filter in the Django tag.

safety on

Safe filter on.

safety off

Safe filter off.

Notice the extra ampersands. That is the only difference, however. The string is not interpreted as HTML in either case.

sesodesa
  • 1,473
  • 2
  • 15
  • 24
  • This isn't related to django. If the source of your HTML (look in your browser developer tools) contains the span with class "inline-math", then jQuery `$(".inline-math")` should find it. How do you know it doesn't? There's no console output? set a breakpoint on your `katex` line and inspect what's `element`. – dirkgroten Mar 20 '19 at 12:44
  • No console output whatsoever. I would disagree with this not being related to django, as the template tags definitely affect the form in which the string is returned. For example, omitting the `safe` filter messes up the `<` and `>` symbols in the string. – sesodesa Mar 20 '19 at 12:45
  • 1
    ok, but the javascript only interacts with the string once it's loaded in your browser. You said the output is correct (-6) when you look at it in your browser, so now it's not related to django anymore. And yes, marking something as "safe" is necessary to avoid escaping HTML. – dirkgroten Mar 20 '19 at 12:47
  • I added a picture to show how the broser is interpreting the string. – sesodesa Mar 20 '19 at 12:50
  • Your screenshot shows that the browser is *not* identifying that as HTML. Are you sure you used `safe`? – Daniel Roseman Mar 20 '19 at 12:51
  • something wrong there because your browser seems to not see this as part of your DOM. Can you look at the raw source code instead? Not sure what I'm look at here. – dirkgroten Mar 20 '19 at 12:52
  • In the source code it says `2. Määritä luvun <span class="inline-math"> -6 </span> vastaluku.` And I definitely used `safe`. – sesodesa Mar 20 '19 at 12:53
  • that means it wasn't rendered as `safe`. You're sure you still have `|safe` in your template? – dirkgroten Mar 20 '19 at 12:55
  • and if you have, what is `generated_files.exercise_instructions.content`? How is this `content` defined? – dirkgroten Mar 20 '19 at 12:57
  • Here's a JSffiddle link to the template: https://jsfiddle.net/#&togetherjs=e5uPJUrEvg – sesodesa Mar 20 '19 at 12:59
  • The `generated_files.exercise_instructions.content` should be a string inside a JSON object. – sesodesa Mar 20 '19 at 12:59

0 Answers0