Django: Passing HTML string to template

Question

I'm having an issue while trying to display a html chunk of code created on a django view. Here's what's happening.

On my view, I'm trying to pass to the template a bunch of book descriptions which I'll hide/show according to user action. These descriptions are stored in html files on the server.

def my_view()
     #loop through the list of books, read their corresponding a html file, and parse it to fill in the book details
     #code, code, code...
     #take the resulting string, append it on books description array, log it and send it to template
     logger.debug(books_description["Clockwork orange"])
     return render_to_response("my_template.html", {'bd': books_description}, context_thingy)

So far so good. My logs show the html string exactly as it should:

 <div id="modal_book_name">Clockwork orange</div>
 <div id="modal_book_genre">Dystopian fiction</div>
 <br>
 <div id="modal_book_desc">yadayadayadayada</div>

Now, since I do not want the content laying about on my html code, I read the book descriptions into a javascript variable like so:

 books_description = {};
 {% for book, book_desc in bd.items %}
       books_description["{{ book }}"] = "{{ book_desc|escapenewline }}"
 {% endfor %}

The escapenewline is a filter that puts a \ at the end of every line, to ensure that javascript is able to correctly interpret the whole string content.

Finally, when the user wants to check out the description on some book, he just clicks it and modal shows up with the book description. for this I have:

    console.log(books_description[book_name]);
    $("#modal_info").html(books_description[book_name]);

Again, everything seems fine with this console.log:

<div id="modal_book_name">Clockwork orange</div><div id="modal_book_genre">Dystopian fiction</div><br><div id="modal_book_desc">yadayadayadayada</div>

Unfortunately, when I open the page the modal_info div is empty. When I open the browser's developer tools and check the html of that div here's what I see:

 <div id="modal_info">
      "<div id="modal_book_name">Clockwork orange</div><div id="modal_book_genre">Dystopian fiction</div><br><div id="modal_book_desc">yadayadayadayada</div>"
 </div>

The problem is in those quotation marks. How did they show up there? How can I get rid of them and why were they put there in the first place?

Thanks in advance. If anything was unclear, feel free to ask and I'll clarify it.

UPDATE: Well, turns out that the modal_info div was not empty after all.. the text was only the same color as the background. Apologies, that was stupid of me. But the problem persists. Where I should see:

 Clockwork Orange
 Dystopian fiction

 yadayadayadayada

I see instead the literal html:

 <div id="modal_book_name">Clockwork orange</div><div id="modal_book_genre">Dystopian fiction</div><br><div id="modal_book_desc">yadayadayadayada</div>

I've tried to parse the string to HTML with the parseHTML function:

  var book_desc = $.parseHTML(books_description[book_name]);
  $("#modal_info").html(book_desc);

but results are the same. Any idea how to get the browser to interpret the string as html code and not as a literal string

Answer 1

Problem solved. Wasn't as dramatic as I thought. It so happens that django was converting html tokens such as '<' and '>' to '&lt' and '&gt'

This resulted in a correct output on the page, but inability to create the corresponding DOM objects.

the fix:

 {% autoescape off %}
    {% for book, book_desc in bd.items %}
       books_description["{{ book }}"] = "{{ book_desc|escapenewline }}"
    {% endfor %}
 {% endautoescape %}

Took me a while. If anyone comes across a similar issue here's some intel on autoescaping

autoescape filter

Answer 2

In case someone lands here for recent django versions, use: {{ your_context_entry|safe }}