flask with many buttons and database update
<p>I am trying to make a web app like a mini-tweets. The posts are pulled out from a database and I want to have an 'up vote' button for each post, like the following picture. </p>

<p><a href="http://i.stack.imgur.com/kJySO.png" rel="nofollow"><img src="http://i.stack.imgur.com/kJySO.png" alt="posts"></a></p>

<p>Each post has an <code>id</code>, <code>author</code>, <code>body</code>, and <code>likes</code> property. When an up vote is clicked, the <code>likes</code> property needs to be updated.</p>

<p>My question is how to determine which button is clicked. What would be a good strategy in this case for the <code>route()</code> function and the html template?</p>

<p>I was thinking of adding a name to each button and put <code>post.id</code> in the name, then check if <code>request</code> has it. But the number of posts are not known before hand, how should I write the <code>request</code> check in <code>route()</code> function?</p>

<p>My current template is as follows</p>

<pre><code>&lt;table class="table table-striped"&gt;
{% for post in posts %}
&lt;tr&gt;
&lt;td&gt; {{ post.id }} &lt;/td&gt;                                                   
&lt;td&gt; &lt;img src="{{ post.author.avatar(50) }}"&gt; &lt;/td&gt;                        
&lt;td&gt; &lt;b&gt;{{ post.body }}&lt;/b&gt; &lt;/td&gt;                                                                                              
&lt;td&gt; &lt;button type="button" name='{{'up.'+ post.id|string}}' class="btn btn-default"&gt;
&lt;span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"&gt;&lt;/span&gt;   
&lt;/button&gt;
{{ post.likes}} &lt;/td&gt;  
&lt;/tr&gt;
{% endfor %}
&lt;/table&gt;
</code></pre>

<p>and the current <code>route()</code> is like this </p>

<pre><code>@bbs.route('/', methods=['GET', 'POST'])                                   
def index():                                                               
    posts = Post.query.all()                                               
    return render_template('bbs/index.html', posts=posts)  
</code></pre>

<p>A clean way to do that would be to add a data attribute, in your <code>button</code> tag and do one ajax request per upvote / downvote.</p>

<p><a href="https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes" rel="nofollow">https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes</a></p>

<p>In your case, it would be called <code>data-id</code>.</p>

<p>Then in your javascript, when the button is clicked, get this data attribute value, and craft your url as such :</p>

<pre><code>/upvote/&lt;data-id&gt;
</code></pre>

<p>And call it using an ajax GET request (so the page doesn't refresh).</p>

<p>Now on flask side get the id as such :</p>

<pre><code>@app.route('/upvote/&lt;post_id&gt;')
def upvote(post_id):
    print('%s upvoted' % post_id)
    # do your db update here and return a json encoded object
</code></pre>

<p>And on javascript side again, when you get your answer from flask, update your button accordingly.</p>

<p>Assuming you put another class in your upvote button for instance : <code>upvote_button</code> and you use jQuery, your javascript could look like that :</p>

<pre><code>&lt;script type='text/javascript'&gt;
$('.upvote_button').click(function(ev){
    var id = $(ev.currentTarget).attr('data-id');
    $.get( "/upvote/" + id, function( data ) {
      // change your button here, and remove its upvote_button class
      alert(data);
    });
});
&lt;/script&gt;
</code></pre>

python html flask html-form html-form-post