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,
- On click of delete modal should open.
- ask user he wants to delete or cancel
- if user clickk delete only that specific testimonial only.
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
2
Answers
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
I checked your code and provided link and found the reason for flikring. Please have a look and run codepen below.
With Flickring
Without flickring
Reason
Placement of modal in tr/li .. it is caused by dark overlay behind.
Solution
Make modal code outside the li tag or table you can keep it in a separate div. You can repeat the for-each loop outside the table and create modals with unique ids for every button. (Not recommended though)
suggestion
I personally prefer to make a single modal code and place it before the body tag. Then i use java script to programmatically show modal and do as necessary.