902 votes
0 answers
php - how to animate shown data by laravel-livewire?
Get the solution ↓↓↓
I have a table component that has an inline edit confirmation popup ,the mechanism behind it is that when you click the delete it calls a function on component class that sets variable confirmDelete to the column's id which will show the confirm delete message on the column , (idk if this relevant or not)
Now i am looking to animate its showing , any ideas on how to do it ?
In my search for answers i found that some people use alpine js to show the data and not livewire but i want to show the confirm message on the specific row that was clicked to delete ,when i try to do it with alpine js clicking on the delete button makes the message show on ever row
Here is my component if anyone wants to check it out to give answers
<div x-data={open:true}>
<div class="container mx-auto px-4 sm:px-8 ">
<div class="py-8">
<div class="flex flex-row mb-1 sm:mb-0 justify-between w-full">
<h2 class="text-2xl leading-tight">
Students
</h2>
<div class="text-end">
<form class="flex w-full max-w-sm space-x-3">
<div class=" relative ">
<input type="text" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="name"/>
</div>
<button class="flex-shrink-0 px-4 py-2 text-base font-semibold text-white bg-purple-600 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" type="submit">
Filter
</button>
</form>
</div>
</div>
<div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
<div class="inline-block min-w-full shadow-lg rounded-lg overflow-hidden">
<table class="min-w-full leading-normal table-fixed">
<thead>
<tr >
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
Student
</th>
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
Age
</th>
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
E-mail
</th>
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
Phone number
</th>
<th x-show="!open" colspan="3"></th>
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
Grade
</th>
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
CLass-group
</th>
<th scope="col" class="px-5 py-3 bg-white border-b border-gray-200 text-gray-800 text-left text-sm uppercase font-normal">
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($students as $student )
<tr>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="#" class="block relative">
<img alt="profil" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtGSxRiDjbP9GqU0rusWrXNLAkWy4OLqhdug&usqp=CAU" class="mx-auto object-cover rounded-full h-10 w-10 "/>
</a>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap">
{{$student->name}}
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p class="text-gray-900 whitespace-no-wrap">
{{$student->age}}
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p class="text-gray-900 whitespace-no-wrap">
{{$student->email}}
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p class="text-gray-900 whitespace-no-wrap ">
{{$student->phoneNumber}}
</p>
</td>
@if ($cDelete==$student->id)
<td colspan="3"
class="px-5 py-5 border-b border-gray-200 bg-red-500 text-sm">
<p class="text-white whitespace-no-wrap ">
<b>Are you sure you wnt to delete this student ? <a href="#">Yes</a><a @click="open = true" href="#">No</a> </b>
</p>
</td>
@else
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p class="text-gray-900 whitespace-no-wrap ">
{{$student->classroom->grade}} {{$student->classroom->grade ==1 ?'st':(($student->classroom->grade == 2)? 'nd': 'th')}}
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
<span aria-hidden="true" class="absolute inset-0 opacity-50 rounded-full">
</span>
<span class="relative">
{{$student->classroom->group}}
</span>
</span>
</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<a href="#" class="text-indigo-600 hover:text-indigo-900">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-red-500 hover:text-red-700" wire:click="confirmDelete({{$student->id}})" >
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</a>
</td>
</tr>
@endif
@endforeach
</tbody>
</table>
</div>
<?php
namespace App\Http\Livewire;
use App\Models\Student;
use Livewire\Component;
class Students extends Component {
public $cDelete;
public function confirmDelete($id) {
$this->cDelete = $id;
}
public function render() {
return view('livewire.students', [
'students' => Student::all(),
]);
}
}
Undefined asked
Share solution ↓
Additional Information:
Date the issue was resolved:
Link To Answer People are also looking for solutions of the problem: foreign key constraint is incorrectly formed laravel
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.