Load data from flask into html when pressing a button

Question

I am trying to load a variable into a HTML page when pressing a button. The problem is that I already have a function to load the initial page, and the new data shall be loaded on the same page, without redirecting. This is the code i have by now:

.py file: 

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

def get_documents():
   documents = {'asd': 'as', 'def':'de'}
   return render_template('index.html', documents=json.dumps(documents))

index.html file

<div>
  <button onclick="Start()" id="StartButton" >Start</button>
</div>


<div id = "feed" style="display: none;">  
</div>
<script>
    var d = JSON.parse('{{documents | tojson | safe}}');
    document.getElementById('feed').innerHTML = d.asd; 
 </script>

.js file:

function Start() 
{
  var feed_div = document.getElementById("feed");
  feed_div.style.display = "block";
}

I would like that when i press the Start button, the content in the documents structure would appear in the .feed section. How could i do this?

Also, documents will be a list, but here i used a json because i wanted to try some examples i've found.

Barak Avraham · Accepted Answer · 2020-06-17 14:20:18Z

1

You can create div element inside the feed element, this element will contain all of your document data and will be hidden

<div id="document" style="display: hidden">
    {% for item in documents %}
        <div>{{ item }}</div>
    {% endfor %}
</div>

and then in javascript change the display of the document element:

function start() {
    document.getElementById("document").style.display = "block";
}

answered Jun 17, 2020 at 14:20

Barak Avraham

962 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load data from flask into html when pressing a button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related