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
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (5)
@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')
}
}
})
})
@omerf
Hocam aslında başlangıçta bahsettiğiniz şekilde tek butondan yapmaya çalıştım ve şu sorunla karşılaşmıştım; laravelde silme işlemi için post değil delete methodu kullanılıyor ben de bunu aşmak için iki ayrı ajax methodu kullanmıştım yani methodum post olduğunda silme işleminde muhtemel bir hata alacağım...
Öncelikle tıklandıkça bir butonun gitmesi, diğer butonun gelmesi hatalı. Aynı buton aynı yere post atabilir. Post işlemi gelince veritabanından beğenmiş mi diye kontrol
edip öyle işlem yapmalısınız. Örnedğim;
$(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){
if(response.status == 1){
this.html('Beğen')
}else {
this.html('Beğenme')
}
}
})
})
...
public function like(Request $request){
$data = likes::find($request->id);
if($data){
$data->delete()
response()->json(['status'=>1])
}else {
likes::insert(['post_id' => $request->id,'user_id' => Auth::user()->id]);
response()->json(['status'=>0])
}
}
Umarım yardımcı olucaktır.
Edit: Veri tabanınızın like sistemi için bu yapıda olmasını tavsiye etmem json formatı daha avantajlı olacaktır.
@omerf öncelikle bilgi için teşekkür ederim.
Evet şu noktada sorunum iki buton var ve bunların beğenildikten ve beğeni geri çekildikten sonra birbirleri arasında değişmesini planlıyorum bunu da d-none d-block ile yapabildim.
Ancak, ilk işlem sonrasındaki her işlem kendini tekrar ediyor 2 kere tıklamış gibi oluyor butona. Kod yine çalışıyor ancak bir hatalı(zaten beğendiği bir şeyi tekrar beğenemeyeceğinden ya da tam tersi) bir doğru işlem göndererek çalışıyor.
Aslında tam olarak "bir kez daha sile tıklarsa oluşan hata mı?" dediğiniz.
Öncelikle ajaxda hem csrf için header verip hem de data olarak _token vermenize gerek yok. Sadece birisi yeterli olacaktur. Onuda 2 fonskyona yazmanıza gerek yok fonskyon dışı bir yerde yazsanız yeterli olacaktır. Ve hatanızı net bir şekilde anlayamadım biraz açıklayabilirmisiniz?
Sorun beğendikten sonra sil dediğini düşünürsek, bir kez daha sile tıklarsa oluşan hata mı?