Как можно менять значение (лайков), то есть выводить колличество лайков только в том родительском блоке блогпоста , который соответствует id блогпоста
Хотелось бы, чтоб через 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!']);
}
}
Ответы (2 шт):
Постарался сделать понятно, если что уточняйте. Конечно нужно было 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>
Добавил в Контроллер пару строк $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');
}
});
});