Javascript внутри Jinja "для" цикла - PullRequest
Новая
       1

Javascript внутри Jinja "для" цикла

0 голосов
/ 16 ноября 2018

Я кодирую приложение на Python Flask и создаю интерактивные кнопки Like с Javascript.

Вот мой маршрут: 

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

И в jquery.html шаблон У меня есть: 

{% 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 %}

На самом деле все работает так, но я хотел бы сохранить результаты кликов +1 лайков и перенести их в переменную Python, чтобы я мог добавить его вбаза данных и обновленные числа Like отображаются на странице после обновления.

Я пытался использовать функцию JavaScript следующим образом: 

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

и: 

onclick="myF1()"

Но тогда только последний лайк на странице обновляется нажатием кнопки, независимо от того, какую кнопку «лайк» я нажимаю.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

ОК, я заставил это работать:

  1. Вот наш маршрут Flask:

    @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)

А вот наша HTML-страница с некоторым 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>
0 голосов
/ 16 ноября 2018

Вы близки, однако, как указал @MartijnPieters, вам все равно нужно связаться с бэкэндом, чтобы обновить количество лайков для поста. Для этого слегка измените свой HTML-код, чтобы включить кнопку для обновления лайков с помощью класса и идентификатора. Идентификатор будет таким же, как и идентификатор записи, и класс будет общим. Затем используйте jquery с ajax после создания script.

Сначала в бэкэнде Python создайте маршрут для обработки обновления лайков: 

@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'})

Я предлагаю вернуть ответ json ified, чтобы вы могли обрабатывать ошибки, которые могут возникнуть, например, если пользователю нравится публикация дважды. Если вы обнаружите, что это так, то вы можете вернуть flask.jsonify({'success':'False'}) и обработать это соответствующим образом в интерфейсе.

Затем в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...