Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

livewire eventi tetiklenince datatable kayboluyor

MrNeo

livewire'ı yeni öğreniyorum. Datatable kütüphanesiyle bir tablo üretip bunu da livewire komponenti olarak kullanmaya çalıştım. Datatable kütüphanesi arama işlemini kendisi zaten hallediyor ama ben silme ve güncelleme işlemlerini livewire ile yapmak istediğim için tabloyu livewire komponentine çevirmeye çalışıyorum.

Komponent sınıfım aşağıdaki gibi. Eventi test etmek için bir title oluşturdum ve event tetiklenince title değişiyor.

Tablom başta aşağıdaki gibi görünüyor

Komponentin viewında title'ı bu şekilde ekrana bastım

En sağdaki çarpıya basınca da aşağıdaki gibi eventi tetikledim

Event tetiklendikten sonra title1 değeri title2 olarak değişiyor fakat datatable kayboluyor.

Tablo komponentinin bulunduğu view da aşağıdaki şekilde

Çarpıya tıklayınca komponent tekrar renderlandığı için $("#userDataTable").DataTable(); kodunu tekrar çalıştırmam gerekiyordur diye düşünüp o kısmı da komponent viewının sonuna aldım ama sonuç değişmedi.

BoraN7

Livewire componenti içerisinde JS kütüphaneleri kullanmak biraz sıkıntılı. DataTables JS'yi doğrudan kullanmanız zor.

Ya kendi tablonuzu yapacaksınız ya da bunun için kütüphaneler kullanacaksınız.

Örneğin ; https://livewire-datatables.com/

MrNeo

BoraN7 Direkt tabloyu değil de tablonun satırlarını komponent yapayım dedim.
Tablo olmadan sadece komponenti aşağıdaki gibi ekrana basınca click eventi başarılı bir şekilde çalışıyor.

Ama aşağıdaki gibi tablonun içinde kullanınca click eventi çalışmıyor. Network kısmına bakıyorum istek de atılmıyor.

Fotoğraftaki tablo datatable değil, normal html tablosu.

Yani satırları direkt ekrana bassam çalışıyor. Fakat html tablosunun içine koyunca çalışmıyor.

MrNeo

MrNeo
componentimin viewı bu şekilde

<div>
    <tr>
        <td>{{$userId}}</td>
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
        <td>{{is_null($user->email_verified_at) ? "No" : "Yes"}}</td>
        <td><button wire:click="changeText">click</button> {{$text}}</td>
    </tr>
</div>

BoraN7

MrNeo $user->id değil de direkt $user modelini göndermeniz gerekmiyor mu?

Yani;

@foreach($users as $user)
<livewire:user-datatable-row :user="$user" />
@endforeach

Daha sonra componentinizin içerisinde

<div>
    <tr>
        <td>{{$loop->iteration}}</td>
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
        <td>{{is_null($user->email_verified_at) ? "No" : "Yes"}}</td>
        <td><button wire:click="changeText">click</button> {{$text}}</td>
    </tr>
</div>

MrNeo

BoraN7 sadece idyi gönderip komponentte userı çekiyordum dediğiniz şekilde değiştirdim ama sorun hala devam ediyor

BoraN7

Livewire Controller tarafınızda da tanımlı değil mi?

public $user;

şeklinde.

MrNeo

BoraN7 tanımlı. dediğim gibi komponenti erkana direkt basınca çalışıyor zaten ama html tablosunun içine koyunca ilginç bir şekilde çalışmamaya başlıyor.

BoraN7

Yapmak istediğiniz şeyi anlıyorum ama -anlayabildiğim kadarıyla- Livewire DOM'da manipülasyonlar yaparken, Jquery Datatables'da aynı şekilde DOM manipülasyonları yapıyor. Muhtemelen çakışma yaşıyorsunuz.

Siz sadece hücreyi livewire componenti yapsanız bile, sayfaya DataTables'da müdahale ediyor sonuçta.

Çok gelişmiş bir tabloya ihtiyacınız yoksa Datatables JS kullanmadan kendiniz de yapabilirsiniz. Ya da konunun başında paylaştığım kütüphaneyi de inceleyebilirsiniz.

Mesela şurada kendi çapımda yapmıştım;

https://github.com/boranbar/sweetalert-test-with-alpine

Bu repo nun amacı SweetAlert'i Alpine JS ile tetikleyip Livewire'da işlem yapmaktı.

Tabloyu direkt Livewire componenti yaptım. Arama işini de Livewire'a bıraktım. Burada isterseniz Livewire sortable paketini dahil edip sort işlemini de yaptırabilirsiniz (https://github.com/livewire/sortable)

MrNeo

BoraN7 belirttim ya datatable kullanmadım😀 buna rağmen çalışmıyor anlayamadım bir türlü. Düz html tablosunun içine koyunca çalışmıyor

MrNeo

BoraN7 yeni proje açıp her şeyden izole bir şekilde denedim. Butona basınca title değeri değişen bir komponent yazdım.

class Test extends Component
{
    public $text = "text1";

    public $dataArray = ['a', 'b', 'c', 'd'];
    
    public function render()
    {
        return view('livewire.counter');
    }

    public function click() {
        $this->text = "text2";
    }
}

Viewı da böyle

<div>
    @foreach($dataArray as $key => $value)
        <tr>
            <td>{{$key}}</td>
            <td>{{$value}}</td>
            <td><button wire:click="click">click</button></td>
            <td>{{$text}}</td>
        </tr>
    @endforeach
</div>

Bu komponenti tek başına @livewire('test') şeklinde çağırınca text1 değeri test2 oluyor

<table>
    <thead>
    <tr>
        <th>key</th>
        <th>value</th>
        <th>button</th>
        <th>text</th>
    </tr>
    </thead>
    <tbody>
    @livewire('test')
    </tbody>
</table>

ama yukarıdaki gibi tablonun içinde çalıştırınca patlıyor datatable falan da yok niye böyle bu ya 🙁

BoraN7

MrNeo render fonksiyonu içerisinde return view('livewire.counter');vermişsiniz. View dosyanız livewire klasörü içerisinde counter.blade.php mi?

Eğer öyleyse @livewire('test') yerine @livewire('counter') kullanılması gerekmiyor mu?

Bende Livewire'ı çok kullanmış biri olmadığım için gördüğümden yola çıkarak fikir yürütmeye çalışıyorum : ) Umarım sorununuzu çözersiniz.

MrNeo

İnternette hiçbir şey bulamadım. Attığınız kütüphaneye bakayım. Cevaplarınız için teşekkürler

MrNeo

BoraN7 dokümanda örnek olarak counter komponenti oluşturuluyordu onu test ettim sonra da ismini test olarak değiştirmiştim viewın adını değiştirmeyi unutmuşum 😃 ama sorun oradan kaynaklı değil maalesef

BoraN7

MrNeo Network sekmesinde hiç bir ipucu yok mu hataya dair? Belki de ufak bir şey gözden kaçıyor : )

MrNeo

BoraN7 hayır hiç istek atılmıyor

mertasan

sorununuzu tam anlamadım, geceden kalmayım biraz. ama foreach döngüsü içinde livewire componenti çağırmanızı tavsiye etmem.

livewire componentini tek bir user datasına yönelik değil, tüm datalara yönelik oluşturun. ve livewire'da tüm user datasını sakladığınız değişkeni loop halinde işleyin.

ayrıca loop kullanırken (sanırım hatalarınız bundan kaynaklı olabilir) `:userId="$user->id' attribute eklediğinizi görüyorum. yanına mutlaka indexi key olarak ekleyin. yani şu şekilde olmalı

@foreach($users as $index => $user)
<tr wire:key="row-{{ $index }}" :userId="$user->id">
    <td>{{ $user['name'] }}</td>
</tr>
@endforeach

eğer wire:key kullanmazsanız çoğu durumda veriler veya componentler eşleşemez. misal; bir datatable'da 2 tane row arasından birisinin verisi değiştiğinde aynı veri ikisine birden yansır. bunu, her bir öğeyi wire:key ile ayırt ettirerek önlersiniz.

şimdi pek yardımcı olamadım ama bi github reposuna minimum düzeyde örnek bir proje ekleyip link atarsanız, akşam düzeltip PR gönderirim size.

yaklaşık 3 aydır tall stack yapısıyla datatables eklentisi yazıyorum. livewire/datatables kelimelerini görünce konu dikkatimi çekti. ama biraz uyku saatine yakın olduğu için pek yardımcı olamıyorum🙂 kolay gelsin.

edit: tekrar inceledim de.. sizin yaşadığınız sorun çok yüksek ihtimalle yukarda bahsetmiş olduğum wire:key eklememe durumunuzla ilgili.

edit 2: akşama bırakmayım dedim 😃 başlangıç için yardımcı olması amaçlı ufak bi demo hazırladım. playground üzerinde çalıştığım için hatalarım olabilir ama ana mantık anlaşılır olmuştur diye düşünüyorum. sort ve paginate de ekledim. User::all() kullanmak yerine bunu eğer query ile yaparsanız hem performans açısından çok iyi olur, hem sorgularınıza filtre, search, cache vb. şeyler de katabilirsiniz. paginator sayesinde zaten performans++. ek olarak, dediğim gibi wire:key mutlaka ekleyin. use Livewire\WithPagination ve ardından {{ $posts->links() }} kullanarak sayfalandırma kısımlarını da gösterebilirsiniz.

tablo eğer sürekli işlem yaptığınızda ortadan kayboluyorsa tüm view dosyasını <div> </div> arasına aldığınızdan da emin olun. MrNeo

https://laravelplayground.com/#/snippets/ef3072b3-c988-490c-a944-f7e3386e0e63

MrNeo

mertasan key ekleyince çözüldü 😁 daha önce bunu denemiştim diye hatırlıyorum ama yanlış bir şey yapmışım sanırım. Çok teşekkür ederim

mertasan

[bilinmeyen] tüm şablon <div></div> arasında dimi? Eğer component loop içinde çalışıyorsa mutlaka :key de eklemeyi de deneyin.

<livewire:user :user="$user" :key="$user->id" />

MrNeo

mertasan o yorumu sildim bir hata yapmışım düzelttim ve şuan çalışıyor. Tekrardan çok teşekkürler

mertasan

MrNeo rica ederim kolay gelsin🎉

Sonraki Sayfa »