Bir silme islemi için modal onay kutusu açmak istiyorum. Alpine js ile çalışan bir modalim var ve livewire kullanmak istemiyorum. Sorunum silinecek id bilgisini alpine modal içine aktaramiyorum.livewire kullanmadan bunu yapmanın bir yolu var mi.
Modali component olarak çağırıyorum, sayfanın içinde değil.
Kod göstermeden pek yardimci olamayiz. Livewire kullanmadan modali gösterebilirsin ama silme islemi için mecbur sunucuya istek göndermen gerekecek o yüzden Livewire'i komple baypas etmenin çok yarari olmaz. Kullandigin degiskenleri @entangle içerisine alirsan gereksiz sunucu istegi gitmez.
Aşağıdaki şekilde sadece alpin.js kullanarak bir onay modali olusturdum. Çalışıyor fakat doğrumu cok emin olamadım.
Form içinde hidden input olarak gerekli id yi ilettim ve controller de $id = $request->id; ile aldım.
''' <div x-data="{ modelOpen: false }" class="flex">
<button @click="modelOpen =!modelOpen" class="flex justify-center text-gray-900 text-md bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
<span>Sil </span>
</button>
<div x-show="modelOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen px-4 text-center md:items-center sm:block sm:p-0">
<div x-cloak @click="modelOpen = true" x-show="modelOpen"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-60" aria-hidden="true"
></div>
<div x-cloak x-show="modelOpen"
x-transition:enter="transition ease-out duration-300 transform"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="transition ease-in duration-200 transform"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="inline-block w-full max-w-md p-6 my-20 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl xl:max-w-xl"
>
<div class="flex items-center justify-between space-x-4">
<h1 class="text-xl font-bold text-gray-800 ">Kaydı silmek istediğine emin misin?</h1>
</div>
<p class="mt-2 text-md text-gray-800 ">
Devam ederseniz bu kaydı kalıcı olarak sileceksiniz. Devam etmek istediğinize emin misiniz?
</p>
<form method="post" action="{{route('linkler.sil')}}" class="p-6">
@csrf
@method('delete')
<x-text-input name="id" type="hidden" value="{{ $liste->id }}" />
<x-text-input name="site_id" type="hidden" value="{{ $liste->site_id }}" />
<div class="flex justify-end mt-6">
<button for="show"
@click="modelOpen = false" type="button" class="mr-2 px-3 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-500 hover:bg-gray-600 rounded-md shadow-md">
Vazgeç
</button>
<button for="show"
@click="modelOpen = false" type="submit" class="px-3 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-rose-500 hover:bg-rose-600 rounded-md shadow-md">
Kaydı Sil
</button>
</div>
</form>
</div>
</div>
</div>
</div> '''
