Django AjaxでIikeボタンの作成をしています。
Likeを押す際にページを読み込みたくないのですが、が読み込まれてしまいます。
preventDefault
の指定箇所をいろいろ変更してみたのですが、読み込まれてしまいます。
そもそも書き方が違うのでしょうか?
他に必要なものがあれば追記いたします。よろしくお願いいたします。
html
1 <form action="{% url 'app:like-post-view' %}" method="POST" class='like-form' id='{{item.id}}'> 2 {% csrf_token %} 3 <input type="hidden" name="post_id" value={{item.id}}> 4 <div class="LikesIcon"> 5 {% if user not in item.liked.all %} 6 <i class="far fa-heart LikesIcon-fa-heart"></i><div class="like-count{{item.id}}"></div> 7 {% else %} 8 <i class="fas fa-heart LikesIcon-fa-heart" style="color:red;"></i><div class="like-count{{item.id}}"></div> 9 {% endif %} 10 </div> 11 </form>
javascript
1 <script> 2 $('.like-form').click(function() { 3 $('form').submit(); 4 }); 5 6 $('.like-form').submit(function(e){ 7 e.preventDefault() 8 9 const post_id = $(this).attr('id') 10 11 const hasLike = $(`.LikesIcon${post_id}`).find('i').hasClass('like') 12 13 const url = $(this).attr('action') 14 15 let res; 16 const likes = $(`.like-count${post_id}`).text() 17 const trimCount = parseInt(likes) 18 19 $.ajax({ 20 type: 'POST', 21 url: url, 22 data: { 23 'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(), 24 'post_id':post_id, 25 }, 26 success: function(response) { 27 if(hasLike) { 28 $(`.like-btn${post_id}`).html('<i class="far fa-heart LikesIcon-fa-heart"></i>') 29 res = trimCount - 1 30 } else { 31 $(`.like-btn${post_id}`).html('<i class="fas fa-heart LikesIcon-fa-heart"></i>') 32 res = trimCount + 1 33 } 34 35 $(`.like-count${post_id}`).text(res) 36 }, 37 error: function(response) { 38 console.log('error', response) 39 } 40 }) 41 }) 42 // Likeボタンクリック 43 $('.LikesIcon').on('click', function() { 44 let $btn = $(this); 45 // Likeボタンがonクラス持っていたら 46 if ($btn.hasClass('on')) { 47 48 $btn.removeClass('on'); 49 50 // 白抜きアイコンに戻す 51 $btn.children("i").attr('class', 'far fa-heart LikesIcon-fa-heart'); 52 53 } else { 54 $btn.addClass('on'); 55 $btn.children("i").attr('class', 'fas fa-heart LikesIcon-fa-heart heart'); 56 57 } 58 }) 59 60 </script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。