can anyone fix that for me really I spend a lot of time trying different solutions never works.
I use a tailwindcss template for the modal and javascript to show it or hide it.
I don't find the solution can anyone fix it, My modal just works fine for the first row of the table and did not work for the rest of rows
<!-- component -->
<div >
<div >
<div >
<div >
<table >
<thead>
<tr >
<th >Event Title</th>
<th >Description</th>
<th >Date</th>
<th >Image</th>
<th >Status</th>
<th >Actions</th>
</tr>
</thead>
<tbody >
@foreach ($events as $event)
<tr >
<td >
<div >
<span >{{ $event->title }}</span>
</div>
</td>
<td >
<div >
<span>{{ $event->description }}</span>
</div>
</td>
<td >
<div >
<span >{{ $event->date }}</span>
</div>
</td>
<td >
<div >
<img src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td >
@if(($event->status)==1)
<span >Active</span>
@else
<span >Pending</span>
@endif
<!--<span >Completed</span>-->
</td>
<td >
<div >
<div >
<a href="{{ route('events.edit',$event->id) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</a>
</div>
<!--------My delete buttton------------------>
<div >
<a >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
{!! $events->links() !!}
</div>
</div>
</div>
</div>
<!-- delet event confiming model-->
<div aria-labelledby="modal-title" role="dialog" aria-modal="true" id="overlay">
<div ></div>
<div >
<div >
<div >
<div >
<div >
<div >
<!-- Heroicon name: outline/exclamation-triangle -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z" />
</svg>
</div>
<form action="{{ route('events.destroy',$event->id) }}" method="POST">
@csrf
@method('DELETE')
<div >
<h3 id="modal-title">Delete an Event</h3>
<div >
<p >Are you sure you want to delete the event? All of the event data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div >
<button type="submit" >Delete</button>
<button type="button" id="close-modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- delet event confiming model script-->
<script>
window.addEventListener('DOMContentLoaded', () =>{
const overlay = document.querySelector('#overlay')
const delBtn = document.querySelector('.delete-btn')
const closeBtn = document.querySelector('#close-modal')
const toggleModal = () => {
overlay.classList.toggle('hidden')
overlay.classList.toggle('flex')
}
delBtn.addEventListener('click', toggleModal)
closeBtn.addEventListener('click', toggleModal)
})
</script>CodePudding user response：
Taken directly from the MDN documentation:
The
DocumentmethodquerySelector()returns the firstElementwithin the document that matches the specified selector, or group of selectors. If no matches are found,nullis returned.
So regardless of the number of elements you have in your document with a class of delete-btn, using document.querySelector('.delete-btn') will only ever return the first element it finds.
As you want to be able to apply an event listener to all elements with the delete-btn class, what you really want is the querySelectorAll() method.
The
DocumentmethodquerySelectorAll()returns a static (not live)NodeListrepresenting a list of the document's elements that match the specified group of selectors.
The NodeList returned from calling document.querySelectorAll('.delete-btn'); is a collection (similar concept to an array) which contains all the elements located with the specified selector. As this is a collection and not a single element, you need to iterate over each of the collection elements and attach an eventListener to each iteration.
So applying the above to your use case, you might do:
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.delete-btn').forEach((btn) => {
btn.addEventListener('click', function(evt) {
toggleModal();
})
})
});
An example CodePend for reference.