CODEWITHSUNDEEP
pythonhtmlflask
Max Art
Max Art

Reputation: 65

Flask render template renders noting

Greetings

I have a flask app:

    @app.route('/test')
    def test():
        return render_template('index.html')

And in index.html I have:

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style type="text/css">

        .node {
        cursor: pointer;
      }

      .overlay{
          background-color: #e6d1ee;
      }

      .node circle {
        fill: #fff;
        stroke: #4d4bb4;
        stroke-width: 2px;
      }

      .node text {
        font-size:10px;
        font-family:sans-serif;
      }

      .link {
        fill: none;
        stroke: #7acc7e;
        stroke-width: 2px;
      }

      .templink {
        fill: none;
        stroke: #ff8285;
        stroke-width: 3px;
      }

      .ghostCircle.show{
          display:block;
      }

      .ghostCircle, .activeDrag .ghostCircle{
           display: none;
      }

    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="MyTree.js"></script>
    <body>
        <div id="tree-container"></div>
    </body>

When I run this html code in browser it shows a good graph

But then I render it using flask with render_template, it shows absolutely noting

How can I fix it?

Sorry for this huge code block, I'm not sure that this is html problem

UPD:

Actually yes, the problem was with static thingy. Now my browser can fetch js file. But another problem appeared. In MyTree.js I'm using

    treeJSON = d3.json("{{ url_for('static', filename='dota.json') }}", function(error, treeData)

And the dota.json is not loading in browser. But it is in the same dir that MyTree.js, in static dir.

Upvotes: 2

Views: 139

Answers (1)

Matt Healy
Matt Healy

Reputation: 18531

I would say at the moment your MyTree.js file is not being fetched by the browser (you can check this in your developer console). You will need to place your MyTree.js file in your static directory, and reference the static endpoint in your HTML:

<script src="{{ url_for('static', filename='MyTree.js') }}"></script>

Upvotes: 2

Related Questions