質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.13%

Django AjaxでIikeボタンの作成

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 61

score 82

Django AjaxでIikeボタンの作成をしています。
ー参考サイトー
https://github.com/hellopyplane/Social-Network
上記のコードを参考にしてLikeボタンを作成できたのですが、Likeを押す際にページが読み込まれてしまいます。
バージョンなどは全て最新にしましたが、上手くいきませんでした。

どうすればページが読み込まれずにLikeを押せますか?

models.py

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

    # 管理サイト上の表示設定
    def __str__(self):
        return self.title

    class Meta:
        verbose_name = 'アイテム'
        verbose_name_plural = 'アイテム'

    def num_likes(self):
        return self.liked.all().count()
#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')
urls.py
    path('',  ItemFilterView.as_view(), name='top'),
    path('liked/', like_unlike_post, name='like-post-view'),
                <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++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // 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 => {
            // デフォルトのイベントをキャンセルし、ページ遷移しないように!
            e.preventDefault();

                const post_id = $(this).attr('id')

                const likeText = $(`.like-btn${post_id}`).text()
                const trim = $.trim(likeText)

                const url = $(this).attr('action')

                let res;
                const likes = $(`.like-count${post_id}`).text()
                const trimCount = parseInt(likes)

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
                        'post_id':post_id,
                    },
                    success: function(response) {
                        if(trim === 'Unlike') {
                            $(`.like-btn${post_id}`).text('Like')
                            res = trimCount - 1
                        } else {
                            $(`.like-btn${post_id}`).text('Unlike')
                            res = trimCount + 1
                        }

                        $(`.like-count${post_id}`).text(res)
                    },
                    error: function(response) {
                        console.log('error', response)
                    }
                })

            })
    </script>
{% endblock %}

Ajaxが間違っていると思いこのサイトを見ながらやってもページがローディングされます。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る