Laravel like sistemi ajax ile post ettirmek ile ilgili
Merhabalar,
Sorum biraz uğraşlı olacak o yüzden şimdiden vaktinizi çaldığım için herkesten özür diliyorum. Ve teşekkür ediyorum.
Şuradaki like sistemi kullanıyorum;
https://dev.to/bdelespierre/how-to-implement-a-simple-like-system-with-laravel-lfe
Daha basit bir yapı da yapabilirdim bunu seçtim çünkü çok işlevsel duruyor. Her yere uygulanabiliyor rahatlıkla.
Ancak, yapan arkadaş post işlemini sayfa yenileme türünden yapmış. Ben bunu ajax ile post ettirmeye çalışıyorum ve kısmen de başarılı oldum.
Şöyle bir sorunum var ajax ile post ettirdikten sonra oradaki buton sayfa yenilenene kadar sabit kalıyor... Ben de onu ilkel bir yöntemle javascript yordamıyla aşağıdaki şekilde d-block d-none yaparak gizleyip diğerinin açılmasını sağlamaya çalışıyorum. Bu da gayet çalışıyor gibi görünüyordu taa ki delete methodunun iki kere post ettirilip birinin hata sonucu dönderdiğini görene kadar.
Şimdi biliyorum ki kodum çalışıyor yapması gerekeni yapıyor ama bir yerlerde bir hata yaptığımı ve uzun vadede bana sıkıntı yaratacağını gözlemleyebiliyorum.
$(document).on('click', '.ajax-submit', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
destroy_id = $(this).attr('id');
var _token = $('meta[name="csrf-token"]').attr('content');
var id = $(this).parent().find('.id').val();
var likeable_type = $(this).parent().find('.likeable_type').val();
$.ajax({
type: 'POST',
url: '{{route('like')}}',
data: {
id: id,
likeable_type: likeable_type,
_token: _token,
},
dataType: 'json',
success: function (result) {
$(".upvote-" + destroy_id).addClass('voted');
$(".u-" + destroy_id).addClass('d-none').removeClass('d-block');
$(".d-" + destroy_id).addClass('d-block').removeClass('d-none');
console.log(result);
}
}).done(function (response) {
var likes = response.likes;
$('#numberOfLikes-' + destroy_id).html(response.likes);
});
});
$(document).on('click', '.ajax-delete', function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
destroy_id = $(this).attr('id');
var _tokena = $('meta[name="csrf-token"]').attr('content');
var id = $(this).parent().find('.id').val();
var likeable_type = $(this).parent().find('.likeable_type').val();
$.ajax({
type: 'DELETE',
url: '{{route('unlike')}}',
data: {
id: id,
likeable_type: likeable_type,
_token: _tokena,
},
dataType: 'json',
success: function (result) {
$(".upvote-" + destroy_id).removeClass('voted');
$(".d-" + destroy_id).addClass('d-none').removeClass('d-block');
$(".u-" + destroy_id).addClass('d-block').removeClass('d-none');
console.log(result);
}
}).done(function (response) {
var likes = response.likes;
$('#numberOfLikes-' + destroy_id).html(response.likes);
});
});
Buraya kadar okuyup, sorunumu irdeleyebilen tüm herkese sonsuz teşekkürler <3
@goxaria Hocam bu laravelle alakalı değil, isteklerde post,get,delete,put... gibi bir çok method bulunur. Bunlar düşündüğünüz gibi çalışmaz.
Sizin orada delete işlemi attığınızda insert işlemi yaptığınızı sistem nasıl anlayabilir ki? Hiçbir işlemde hiçbir hatayı almazsınız merak etmeyin.
Evet delete kullanmanız daha doğru olucak fakat performans açısınıdan bu daha kaliteli olacağı için ben bunu tercih ediyorum şahsen
Buraya bir kaynak bırakıyorum. İçindeki birkaç makale gayet iyi.
Derseniz ben aynı kodlarla nasıl delete yaparım? Buyrun;
$(document).on('click','a[data-action=like]',function(e){
e.preventDefault()
var this = $(this);
var id = this.data('id');
$.ajax({
data : {id:id},
url : '/api/like',
method : 'POST',
dataType : 'JSON',
success : function(response){
this.html('Beğenme')
this.data('action','unlike')
}
})
})
$(document).on('click','a[data-action=unlike]',function(e){
e.preventDefault()
var this = $(this);
var id = this.data('id');
$.ajax({
data : {id:id},
url : '/api/like',
method : 'DELETE',
dataType : 'JSON',
success : function(response){
this.html('Beğen')
this.data('action','like')
}
})
})
Tek fonskyonda yazmak isterseniz;
$(document).on('click','a[data-action]',function(e){
e.preventDefault()
var this = $(this);
var id = this.data('id');
var action = this.data('action')
if(action == 'like'){
var method = 'POST'
}else {
var method = 'DELETE'
}
$.ajax({
data : {id:id},
url : '/api/like',
method : method,
dataType : 'JSON',
success : function(response){
if(response.status == 1){
this.html('Beğen')
this.data('action','like')
}else {
this.html('Beğenme')
this.data('action','unlike')
}
}
})
})