I have a laravel blade admin panel and a list of testimonials to render on screen in my table. In my actions column of table I have a delete icon. At first, onclick of it I opened a confirmation dialog to confirm before deleting which worked okay. It didn't look appealing so I added a modal instead. So what I want is,
Issue is my modal opens alright but it keeps flickering on screen and I cant click on it. No console error or networkk errors. Whats causing this and how to resolve it?
@extends('backend.layouts.master')
@section('content')
<div class="layout-px-spacing">
<div class="row layout-spacing">
<div class="col-lg-12">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-6 col-md-6 col-sm-6 col-6">
<h4>All Testimonial</h4>
</div>
@if($flash=session('message'))
<div class="col-xl-6 col-md-6 col-sm-6 col-6">
<div class="alert alert-success mt-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close" data-dismiss="alert">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg></button> <strong>Success!</strong> {{$flash}} </div>
</div>
@elseif($flash=session('error'))
<div class="col-xl-6 col-md-6 col-sm-6 col-6">
<div class="alert alert-danger mt-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close" data-dismiss="alert">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg></button>{{$flash}}</div>
</div>
@endif
</div>
</div>
<div class="widget-content widget-content-area">
<div class="table-responsive mb-4">
<table id="style-3" class="table style-3 table-hover">
<thead>
<tr>
<th class="checkbox-column text-center"> ID </th>
<th class="text-center">Client Name</th>
<th class="text-center">Company</th>
<th class="text-center">Testimonial</th>
<th class="text-center">Date</th>
<th class="text-center dt-no-sorting">Actions</th>
</tr>
</thead>
<tbody>
@foreach($testimonials as $testimonial)
<tr>
<td class="checkbox-column text-center"> {{$testimonial->id}} </td>
<td class="text-center">{{$testimonial->client_name}}</td>
<td class="text-center">{{$testimonial->testimonial_subtitle}}</td>
<td class="text-center">{{$testimonial->testimonial}}</td>
<td class="text-center">{{$testimonial->created_at}}</td>
<td class="text-center">
<ul class="table-controls">
<li><a href="{{ route('admin.testimonial.edit', $testimonial->id) }}" class="bs-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><svg style="color:blue;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 p-1 br-6 mb-1">
<path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
</svg></a></li>
<li>
<button data-toggle="modal" data-target="#myModal{{$testimonial->id}}">
<svg style="color: red;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash p-1 br-6 mb-1">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
</svg>
</button>
<!-- The Modal -->
<div class="modal" id="myModal{{$testimonial->id}}">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
u sure?
</div>
<!-- Modal footer -->
<div class="modal-footer">
<form method="post" action="{{ route('admin.testimonial.destroy', $testimonial->id) }}">
@csrf
{{ method_field('DELETE')}}
<button class="btn btn-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>
Delete
</button>
</form>
</div>
</div>
</div>
</div>
</li>
</ul>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
This will work for blade users, but we're running two loops, although not nested not sure if its gonna be efficient for large volumes of data. If someone can enhance or improve this, pls go ahead:
PS: code has been simplified
@extends('backend.layouts.master')
@section('content')
<div class="layout-px-spacing">
<div class="row layout-spacing">
<div class="col-lg-12">
<div class="statbox widget box box-shadow">
<div class="widget-content widget-content-area">
<div class="table-responsive mb-4">
<table id="style-3" class="table style-3 table-hover">
<tbody>
@foreach($testimonials as $testimonial)
<tr>
<td class="checkbox-column text-center"> {{$testimonial->id}} </td>
<td class="text-center">{{$testimonial->client_name}}</td>
<td class="text-center">{{$testimonial->testimonial_subtitle}}</td>
<td class="text-center">{{$testimonial->testimonial}}</td>
<td class="text-center">{{$testimonial->created_at}}</td>
<td class="text-center">
<ul class="table-controls">
<li>
<button data-toggle="modal" data-target="#myModal{{$testimonial->id}}">
Delete
</button>
</li>
</ul>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@foreach($testimonials as $testimonial)
<!-- The Modal -->
<div class="modal" id="myModal{{$testimonial->id}}">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Are you sure?
</div>
<!-- Modal footer -->
<div class="modal-footer">
<form method="post" action="{{ route('admin.testimonial.destroy', $testimonial->id) }}">
@csrf
{{ method_field('DELETE')}}
<button class="btn btn-danger">
Delete
</button>
</form>
</div>
</div>
</div>
</div>
@endforeach
@endsection