Как можно менять значение (лайков), то есть выводить колличество лайков только в том родительском блоке блогпоста , который соответствует id блогпоста

Рейтинг: 0Ответов: 2Опубликовано: 25.03.2023

Хотелось бы, чтоб через ajax изменялось кол-во лайков (динамически).

    $(document).ready(function () {
        $('a#addlike').on('click', function () {
            event.preventDefault();
            var id = $(this).data('id');
            if (id) {
                $.ajax({
                    url: "{{url('add/onelike')}}/" + id,
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        if ($.isEmptyObject(data.error)) {
                            Swal.fire({
                                position: 'top-end',
                                icon: 'success',
                                title: data.success
                            }).then(function () {
                                 id = $('span.numb').data('bp');
                                
                            });
                        } else {
                            Swal.fire({
                                position: 'top-end',
                                icon: 'error',
                                title: data.error
                            })
                        }
                    }
                });
            } else {
                alert('danger');
            }
        });
    });
 

А вот что в представлении:

<div class="blog-meta">
<a  id="addlike" data-id ="{{ $item->id }}"  href="{{url('add/onelike/'. $item->id) }}">
                                    <i class="fa fa-heart" data-id ="{{ $item->id }}">
                <span class="numb" data-bp ="{{ $item->id }}">{{ $item->like }}</span>
                                    </i>
                                </a>
                            </div>

В LikeController вот что:

  public function like($id){
        $userid = Auth::id();
        $check = DB::table('likes')->where('user_id', $userid)
            ->where('blogpost_id', $id)->first();
        $data = array('user_id'=>$userid, 'blogpost_id'=>$id);
        if(Auth::check()){
            if($check){
                return Response::json(['error' => 'Already Liked Before!']);

            }else{
                DB::table('likes')->insert($data);
                $like = DB::table('blogposts')->where('id', $id)->increment('like'); 
                return Response::json(['success' => 'Thanks for Your Like!']);
            }
        }else{
            return Response::json(['error' => 'First, LogIn Your Account!']);
        }
    }

Ответы

▲ 0Принят

Постарался сделать понятно, если что уточняйте. Конечно нужно было API поэтому воспользовался jsonplaceholder, к сожалению лайков там нет, поэтому я считаю что лайки это количество слов в заголовке, я оставил нули чтобы был виден эффект. Надеюсь этот вариант подойдет. У Вас сбрасывалось так как event.preventDefault(); Вы вызывали, а вот в параметре функции function (event) не прописали.

И еще важно: id должны быть уникальны, иначе это будет не валидный html поэтому я бы на Вашем месте избавился от id="addlike" можно из этого сделать класс. Id - это всегда уникальность и всегда для JS, а class - для класса объектов и в большинстве случаев для CSS.

$(document).ready(function () {
    $('a#addlike').on('click', function (event) {
        event.preventDefault();
        var id = $(this).data('id');
        //lastValue = 
        if (id) {
            $.ajax({
                url: "https://jsonplaceholder.typicode.com/posts/" + id,
                type: "GET",
                dataType: "json",
                success: function (data) {
                  $(`a[data-id ="${id}"] i span.numb`).text(data.title.split(' ').length)
                }
            });
        } else {
            alert('danger');
        }
    });
});
a {
  position: absolute;
  bottom: 0;
  right: 20px;
  text-decoration: none;
  color: black;
}

.blog-meta {
  position:relative;
  min-height: 50px;
  margin: 5px;
  padding: 5px;
  background: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="blog-meta">
    <a  id="addlike" data-id ="2"  href="{{url('add/onelike/'. $item->id) }}">
        <i class="fa fa-heart" data-id ="2">
          ❤️ <span class="numb" data-bp ="2">0</span>
        </i>
    </a>
</div>
<div class="blog-meta">
    <a  id="addlike" data-id ="3"  href="{{url('add/onelike/'. $item->id) }}">
        <i class="fa fa-heart" data-id ="3">
          ❤️ <span class="numb" data-bp ="3">0</span>
        </i>
    </a>
</div>

▲ 0
    Добавил в Контроллер пару строк $like и $totals (не получилось покороче/эллегантнее )
    
    public function like($id){
    
            $userid = Auth::id();
    
            $check = DB::table('likes')->where('user_id', $userid)
                ->where('blogpost_id', $id)->first();
    
            $data = array('user_id'=>$userid, 'blogpost_id'=>$id);
    
            if(Auth::check()){
                if($check){
                    return Response::json(['error' => 'Already Liked Before!']);
    
                }else{
                    DB::table('likes')->insert($data);
                    $like = DB::table('blogposts')->where('id', $id)->increment('like');
                    **$totals = DB::table('blogposts')->where('id', $id)->first();
    
        return Response::json(['success' => 'Thanks for Your Like!', 'totals' =>$totals] );**
                }
            }else{
                return Response::json(['error' => 'First, LogIn Your Account!']);
            }
        }
Изменения в JS 
$(document).ready(function () {
        $('a#addlike').on('click', function (event) {
            event.preventDefault();
            var id = $(this).data('id');
            if (id) {
                $.ajax({
                    url: "{{url('add/onelike')}}/" + id,
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        if ($.isEmptyObject(data.error)) {
                            Swal.fire({
                                position: 'top-end',
                                icon: 'success',
                                title: data.success
                            }).then(function () {
              **$(`a[data-id ="${id}"] i span.numb`).text(data.totals.like)**
                            });
                        } else {
                            Swal.fire({
                                position: 'top-end',
                                icon: 'error',
                                title: data.error
                            })
                        }
                    }
                });
            } else {
                alert('danger');
            }
        });
    });