編集履歴

質問編集履歴

追記

2021/04/15 03:20

投稿

スコア95

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- ~~Django~~ ~~AjaxでIikeボタン~~の作成
1	+ javascript preventDefaultの使い方

body CHANGED Viewed

@@ -1,133 +1,36 @@
 Django AjaxでIikeボタンの作成をしています。
-ー参考サイトー
-[https://github.com/hellopyplane/Social-Network](https://github.com/hellopyplane/Social-Network)
-上記のコードを参考にしてLikeボタンを作成できたのですが、Likeを押す際にページが読み込まれてしまいます。
+Likeを押す際にページを読み込みたくないのですが、が読み込まれてしまいます。
-バージョンなどは全て最新にしましたが、上手くいきませんでした。
+`preventDefault`の指定箇所をいろいろ変更してみたのですが、読み込まれてしまいます。
+そもそも書き方が違うのでしょうか？
-どうすればページが読み込まれずにLikeを押せますか？
+他に必要なものがあれば追記いたします。よろしくお願いいたします。
-```python
+```html
+                <form action="{% url 'app:like-post-view' %}" method="POST" class='like-form' id='{{item.id}}'>
+                    {% csrf_token %}
+                    <input type="hidden" name="post_id" value={{item.id}}>
+                    <div class="LikesIcon">
+                            {% if user not in item.liked.all %}
+                                <i class="far fa-heart LikesIcon-fa-heart"></i><div class="like-count{{item.id}}"></div>
-models.py
+                            {% else %}
-class Item(models.Model):
-    post_user  = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
-    title      = models.CharField(verbose_name='タイトル',max_length=200,)
-    memo       = models.TextField(verbose_name='備考',max_length=300,blank=True,null=True,)
-    created_at = models.DateTimeField(verbose_name='登録日',auto_now_add=True)
-    liked      = models.ManyToManyField('User', blank=True, related_name='likes')
+                                <i class="fas fa-heart LikesIcon-fa-heart" style="color:red;"></i><div class="like-count{{item.id}}"></div>
-    # 管理サイト上の表示設定
+                            {% endif %}
-    def __str__(self):
+                    </div>
-        return self.title
+                </form>
-    class Meta:
-        verbose_name = 'アイテム'
-        verbose_name_plural = 'アイテム'
-    def num_likes(self):
-        return self.liked.all().count()
 ```
-```python
+```javascript
-#Likeボタン実装
-@login_required
-def like_unlike_post(request):
-    user = request.user
-    if request.method == 'POST':
-        post_id = request.POST.get('post_id')
-        post_obj = Item.objects.get(id=post_id)
-        profile = User.objects.get(user_name=user)
-        if profile in post_obj.liked.all():
-            post_obj.liked.remove(profile)
-        else:
-            post_obj.liked.add(profile)
-        like, created = Like.objects.get_or_create(user=profile, post_id=post_id)
-        if not created:
-            if like.value=='Like':
-                like.value='Unlike'
-            else:
-                like.value='Like'
-        else:
-            like.value='Like'
-            post_obj.save()
-            like.save()
-        #data = {'value': like.value,'likes': post_obj.liked.all().count()}
-        #return JsonResponse(data, safe=False)
-    return redirect('app:top')
-```
-```python
-urls.py
-    path('',  ItemFilterView.as_view(), name='top'),
-    path('liked/', like_unlike_post, name='like-post-view'),
-```
-```html
-                <div class="right floated">
-                    <form action="{% url 'app:like-post-view' %}" method="POST" class='like-form' id='{{item.id}}'>
-                        {% csrf_token %}
-                        <input type="hidden" name="post_id" value={{item.id}}>
-                            <button type="submit" class="ui button like-btn{{item.id}}">
-                                {% if profile not in item.liked.all %}
-                                    Like<div class="like-count{{item.id}}">{{item.num_likes}}</div>
-                                {% else %}
-                                    Unlike<div class="like-count{{item.id}}">{{item.num_likes}}</div>
-                                {% endif %}
-                            </button>
-                    </form>
-                </div>
-{% block extrajs %}
     <script>
-        function getCookie(name) {
-            var cookieValue = null;
-            if (document.cookie && document.cookie !== '') {
-                var cookies = document.cookie.split(';');
-                for (var i = 0; i < cookies.length; i++) {
+            $('.like-form').click(function() {
-                    var cookie = jQuery.trim(cookies[i]);
+                $('form').submit();
-                    // Does this cookie string begin with the name we want?
-                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                        break;
-                    }
+            });
-                }
-            }
-            return cookieValue;
-        }
-        var csrftoken = getCookie('csrftoken');
-        function csrfSafeMethod(method) {
-            // these HTTP methods do not require CSRF protection
-            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
-        }
-        $.ajaxSetup({
-            beforeSend: function (xhr, settings) {
-                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
-                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
-                }
-            }
-        });
-        $('#like-form').on('submit', e => {
+            $('.like-form').submit(function(e){
-            // デフォルトのイベントをキャンセルし、ページ遷移しないように!
-            e.preventDefault();
+                e.preventDefault()
                 const post_id = $(this).attr('id')
-                const likeText = $(`.like-btn${post_id}`).text()
+                const hasLike = $(`.LikesIcon${post_id}`).find('i').hasClass('like')
-                const trim = $.trim(likeText)
                 const url = $(this).attr('action')
                 let res;
@@ -142,11 +45,11 @@
                         'post_id':post_id,
                     },
                     success: function(response) {
-                        if(trim === 'Unlike') {
+                        if(hasLike) {
-                            $(`.like-btn${post_id}`).text('Like')
+                            $(`.like-btn${post_id}`).html('<i class="far fa-heart LikesIcon-fa-heart"></i>')
                             res = trimCount - 1
                         } else {
-                            $(`.like-btn${post_id}`).text('Unlike')
+                            $(`.like-btn${post_id}`).html('<i class="fas fa-heart LikesIcon-fa-heart"></i>')
                             res = trimCount + 1
                         }
@@ -156,12 +59,24 @@
                         console.log('error', response)
                     }
                 })
+            })
+            // Likeボタンクリック
+            $('.LikesIcon').on('click', function() {
+              let $btn = $(this);
+              // Likeボタンがonクラス持っていたら
+              if ($btn.hasClass('on')) {
+                $btn.removeClass('on');
+                // 白抜きアイコンに戻す
+                $btn.children("i").attr('class', 'far fa-heart LikesIcon-fa-heart');
+              } else {
+                $btn.addClass('on');
+                $btn.children("i").attr('class', 'fas fa-heart LikesIcon-fa-heart heart');
+              }
             })
     </script>
-{% endblock %}
-```
+```
-Ajaxが間違っていると思い[このサイト](https://blog.narito.ninja/detail/88/)を見ながらやってもページがローディングされます。
-よろしくお願いします。