As my title already says, I have an issue with a modal not opening on all buttons.
Here is the situation:
I have a page that displays all applications a user has sent for different jobs. So it may be just one, or up to whatever.
It looks like this:
https://i.stack.imgur.com/VtfkK.jpg
Now if the user wants to cancel the application he can press the button “Bewerbung zurückziehen”, then the modal opens to give a heads up that all data will be lost and if he is sure, in the modal he can confirm it or go back. Everything works fine for the first post on the site, but all other posts just nothing happens, so the modal doesn’t open.
Here is my code:
- The blade file that displays all posts:
@foreach($bewerbungen as $bewerbung)
@foreach($stellenanzeigen_names as $stellenanzeigen_name)
@if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
<div
class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
<!--Card 1-->
<div
class="overflow-hidden row-span-3 bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
<div class="pt-4 pl-4">
{{ $stellenanzeigen_name->Titel }}
<hr class="border-black">
</div>
<div class="pt-4 pl-8 font-medium text-xl font-bold font-serif">
ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}</div>
<div class="pt-4 pl-8 pb-3 font-medium text-xl font-bold font-serif">
ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}</div>
<div class="w-1/4 mb-4 pl-4">
<div class="font-medium text-base font-bold font-serif mb-4 pb-3">
<button type="submit" id="delete_appl_btn" name="delete_appl_btn"
class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Bewerbung zurückziehen
</button>
</div>
</div>
</div>
</div>
@endif
@endforeach
@endforeachHere is the code for the modal:
<div id="delete_application_modal" class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white hidden">
<div class="mt-3 text-center text-xl">
Bewerbung zurückziehen
<div class="text-center text-sm mt-4">
</div>
</div>
<div class="items-center px-4 py-3">
<label for="delete_application" class="sr-only">Bewerbung zurückziehen</label>
<form action="{{ route('delete', $bewerbung->Bewerbung_ID) }}" method="post">
@csrf
<button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Bewerbung zurückziehen
</button>
</form>
</div>
<div class="items-center px-4 py-3">
<button id="back_btn_tel" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
zurück
</button>
</div>
</div>
@if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
@endif
<script>
var delete_appl_modal = document.getElementById("delete_application_modal");
var open_modal = document.getElementById("delete_appl_btn");
var back_btn = document.getElementById("back_btn_tel");
open_modal.onclick = function () {
delete_appl_modal.style.display = "block";
}
back_btn.onclick = function () {
delete_appl_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
delete_appl_modal.style.display = "none";
}
}
</script>
Honestly I have zero clue why it works for the first but not for the others, they have the same buttons, with same name, id & everything.
Maybe someone of you had a similar issue. I wish you all happy holidays!