Geek Answers Handbook

Django template displaying HTML parameter as text

I created a Django template that requires parameters from a Django view. One parameter is the html bit, which displays the gantt chart. Instead of displaying the parameter as the correct html, it displays it as text.

Why does it treat the contents of the parameter as text instead of tag recognition <script>and <div>?

The html in the parameter that I pass to the Django view is as follows:

        <script language="Javascript" type="text/javascript">
           window.onload = function() {
           var MyVar = [
            {label: "Label-less", times:[{"starting_time":1420228800000,"ending_time":1420257600000}, {"starting_time":1420264800000, "ending_time":1420293600000}, ]},
            ];

           function drawtimeline_MyVar() {
              var chart = d3.timeline()
              .showBorder()
              .stack() // toggles graph stacking
              ...
              *(code removed here for size purposes)*
              ...
             var svg = d3.select("#DIV_MyVar").append("svg").attr("width", 1000)
             .datum(MyVar).call(chart);
              }


        //Call the function
        drawtimeline_MyVar();
        }

       </script>

       <div>
           <h3>Mehe</h3>
           <div id="DIV_MyVar"></div>
       </div>
       <div id="DIV_MyVar_hover" class="hoverDiv">
           <div class="coloredDiv"></div>
              <table border=1 cellpadding=10>
                  <tr>
                    <td>
                      <p>Task ID: </p><div id="name"></div>
                    </td>
                  </tr>
              </table>

       </div>

And the comm_request parameter is used at the bottom of the template as follows:

<html>

  <head>
    <title>Search Results</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script language="Javascript" type="text/javascript" src="./Review/d3-timeline-master/src/d3-timeline.js"></script>
    <script type="text/javascript">
    {{ JSLIB }}
    </script>
    <STYLE type="text/css">
        .axis path,
        .axis line {
          fill: none;
          stroke: black;
          shape-rendering: crispEdges;
        }
        .axis text {
          font-family: sans-serif;
          font-size: 10px;
    </STYLE>

</head>

<body>
<div class="container">
    <div class="page-header">
        <h1>
            <p class="text-center">Much Results</p>
        </h1>
    </div>
</div>
<div class="container">
    <h3><p class="text-center">Charts</p></h3>
</div>
<div class="container">
    <h4 class="text-center">
        Gantt Chart
    </h4>
</div>
{{ comm_requests }}
</body>
</html>
+4
source share
3 answers

You can use a filter in the template safe.

{{ variable_with_html_tag_value | safe }}
+2
source

html , , django.utils.safestring.mark_safe , .

+1

Take a look at the safety filter documentation . This is necessary in order to mark a safe line that is safe for printing, since it does not go beyond HTML. Please note that if autoescapedisabled, the safe filter is not affected. With the help autoescapeyou can do what you need:

{% autoescape off %}
    {{ body }}
{% endautoescape %}

This automatically disables HTML, so the contents of the variable are bodydisplayed as is.

0
source

More articles:


All Articles