title: Django: Passing HTML string to template
body: <p>I'm having an issue while trying to display a html chunk of code created on a django view.
  Here's what's happening.</p>
  
  <p>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.</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>So far so good. My logs show the html string exactly as it should:</p>
  
  <pre><code> &lt;div id="modal_book_name"&gt;Clockwork orange&lt;/div&gt;
   &lt;div id="modal_book_genre"&gt;Dystopian fiction&lt;/div&gt;
   &lt;br&gt;
   &lt;div id="modal_book_desc"&gt;yadayadayadayada&lt;/div&gt;
  </code></pre>
  
  <p>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: </p>
  
  <pre><code> books_description = {};
   {% for book, book_desc in bd.items %}
         books_description["{{ book }}"] = "{{ book_desc|escapenewline }}"
   {% endfor %}
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>    console.log(books_description[book_name]);
      $("#modal_info").html(books_description[book_name]);
  </code></pre>
  
  <p>Again, everything seems fine with this console.log:</p>
  
  <pre><code>&lt;div id="modal_book_name"&gt;Clockwork orange&lt;/div&gt;&lt;div id="modal_book_genre"&gt;Dystopian fiction&lt;/div&gt;&lt;br&gt;&lt;div id="modal_book_desc"&gt;yadayadayadayada&lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code> &lt;div id="modal_info"&gt;
        "&lt;div id="modal_book_name"&gt;Clockwork orange&lt;/div&gt;&lt;div id="modal_book_genre"&gt;Dystopian fiction&lt;/div&gt;&lt;br&gt;&lt;div id="modal_book_desc"&gt;yadayadayadayada&lt;/div&gt;"
   &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks in advance. If anything was unclear, feel free to ask and I'll clarify it.</p>
  
  <p><em><strong>UPDATE</em></strong>: 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:</p>
  
  <pre><code> Clockwork Orange
   Dystopian fiction
  
   yadayadayadayada
  </code></pre>
  
  <p>I see instead the literal html:</p>
  
  <pre><code> &lt;div id="modal_book_name"&gt;Clockwork orange&lt;/div&gt;&lt;div id="modal_book_genre"&gt;Dystopian fiction&lt;/div&gt;&lt;br&gt;&lt;div id="modal_book_desc"&gt;yadayadayadayada&lt;/div&gt;
  </code></pre>
  
  <p>I've tried to parse the string to HTML with the parseHTML function:</p>
  
  <pre><code>  var book_desc = $.parseHTML(books_description[book_name]);
    $("#modal_info").html(book_desc);
  </code></pre>
  
  <p>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</p>