Javascript inside Jinja "for" loop

user_1998320 0
Viewed 2472

I'm coding an app in Python Flask and I'm building interactive Like buttons with Javascript.

Here's my route:

@app.route('/jquery')
def jquery():
    posts = Post.query.all()
    return render_template('jquery.html', posts=posts)

And in the jquery.html template I have:

{% for p in posts %}
{% if p.upvotes %}
{% set pupvotes = p.upvotes %}
{% else %}
{% set pupvotes = 0 %}
{% endif %}

<p>{{ p.author.username }} says: <b>{{ p.body }}</b>&nbsp;&nbsp;<button id=" 
{{ p.id }}" onclick="document.getElementById('{{ p.id }}').innerHTML = {{ 
pupvotes }} +1  + ' Likes'">{{ pupvotes }} Likes</button></p>

{% endfor %}

Everything actually works this way, but I would like to save the results of +1 likes clicks and transfer them to a Python variable so that I can add it to the database and the updated Like numbers show up on the page after refresh.

I tried to use JavaScript function this way:

<script>
function myF1() {
    document.getElementById('{{ p.id }}').innerHTML = {{ pupvotes }} +1  + ' 
Likes';
}
</script>

and:

onclick="myF1()"

But then only the last Like on the page gets updated with click, no matter which Like button I click.

flask python javascript
2 Answers

You are close, however, as @MartijnPieters pointed out, you still need to communicate with the backend to update the number of likes for the post. To do so, slightly change your HTML to include a button to update the likes with a class and id. The id will be the same as the post id, and the class will be generic. Then, utilize jquery with ajax after creating a script.

First, in the Python backend, create a route to handle the updating of the likes for a post:

@app.route('/update_like')
def update_likes():
  _id = int(flask.request.args.get('post_id'))
  #Do something to update the database
  return flask.jsonify({'success':'True'})

I suggest returning a jsonified response so that you can handle errors that may occur, such as a user liking a post twice. If you discover that that is the case, then you could return flask.jsonify({'success':'False'}) and handle that accordingly in the frontend.

Then, in the HTML:

<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <div class='post_wrapper'>
    {%for p in posts%}
       <div id='post_{{post.id}}'>
         <p>{{p.author.username}} says:</p>
         <p>{{p.body}}</p>
         {%if p.upvotes%}
           <button class='upvote' id='upvote_{{p.id}}'>Like <span id='upvotes_{{p.id}}'>{{p.upvotes}}</span></p>
         {%else%}
            <button class='upvote' id='upvote_{{p.id}}'>Like <span id='upvotes_{{p.id}}'>0</span></p>
         {%endif%}  
       </div>
    {%endfor%}
  </div>
  <script>
    $(document).ready(function(){
      $('.post_wrapper').on('click', '.upvote', function(){
         var post_id = this.id.match('\\d+');
         $.ajax({
          url: "/update_like",
          type: "get",
          data: {post_id: post_id},
          success: function(response) {
            if (response.success === 'True'){
              var like_val = parseInt($('#upvotes_'+post_id).text()) + 1;
              $('#upvotes_'+post_id).text(like_val.toString());
            }
            else{
               alert('You already liked that post!');
            }
          }
         });
      });
    });
  </script>
</html>
user_73267380

OK, I've made it work:

  1. Here's our Flask route:

    @app.route('/ulk') def ulk(): ppp = request.args.get('p', 0, type=int) lpost = Post.query.filter_by(id=ppp).first() lpost.upvotes += 1 db.session.commit() return jsonify(result=ppp)

And here's our HTML page with some jQuery:

<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>


 <body>
 <script type=text/javascript>
  $(function() {
    $('a#like').bind('click', function() {

      $.getJSON('/ulk', {
        p: pid
      }, function(data) {
        $("#result2").text(data.result);
      });
      return false;

    });
  });
</script>

 <br/><br/>
{% for p in posts %}

 {% if p.upvotes %}
{% set pupvotes = p.upvotes %}
{% else %}
{% set pupvotes = 0 %}
{% endif %}

 <p>{{ p.author.username }} says: <b>{{ p.body }}</b>&nbsp;
         <a href="#" id=like>
             <button id="{{ p.id }}" onclick="pid={{ p.id }};pvts = {{ pupvotes }} +1;myF1();">{{ pupvotes }} Likes</button>
         </a>
 </p>

 <script type=text/javascript>
 function myF1() {
    $( "#" + pid ).text(pvts + ' Likes');

    $('#' + pid).on('click', function() {
    $(this).prop('disabled', true);
});
 }
</script>

 {%endfor%}
<br/>
 <span id=result2>...</span>
 </body>

</html>
user_19983200
Related