Wie kann verhindert werden, dass ein Modal in Laravel beim Senden verschwindet?
Ich habe eine Laravel-Anwendung, die auf der Ansichtsseite ein modales Feld hat, das es dem Benutzer ermöglicht, Daten zur Datenbank hinzuzufügen. Standardmäßig verschwindet das Modal, wenn der Benutzer auf die Schaltfläche „Senden“ klickt und das Backend einen Fehler zurückgibt. Ich möchte das Modalfeld sichtbar halten, wenn ein Fehler auftritt. Wie kann ich dieses Ziel erreichen?
Schaltfläche, die das Modal auslöst
<div><button class="add" data-modal-target="#modal-box">Add New Year</button></div>
Mein Modal
<div class="modal-box" id="modal-box">
<div class="modal-header">
<div class="title"><h1>Create School Year</h1></div>
<div data-close-button class="modal-close-btn">
<span class="material-symbols-sharp">close</span>
</div>
</div>
<hr>
<div class="modal-body">
<form action="{{ route('create.year') }}" method="post">
@csrf
<div class="input-form">
<div class="form-group">
<h3>School Year <span class="danger">*</span></h3>
<input type="text" name="name" id="name">
@error('name')
<p class="error danger">{{ $message }}</p>
@enderror
</div>
<div>
<button type="submit" class="create">Create Year</button>
</div>
</div>
</form>
</div>
</div>
JavaScript-Umschaltmodalbox
const openModalButtons = document.querySelectorAll("[data-modal-target]");
const closeModalButtons = document.querySelectorAll("[data-close-button]");
const overlay = document.getElementById("overlay");
openModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const modal = document.querySelector(button.dataset.modalTarget);
openModal(modal);
});
});
closeModalButtons.forEach((button) => {
button.addEventListener("click", () => {
const modal = button.closest(".modal-box");
closeModal(modal);
});
});
overlay.addEventListener("click", () => {
const modals = document.querySelectorAll(".modal-box.active");
modals.forEach((modal) => {
closeModal(modal);
});
});
function openModal(modal) {
if (modal == null) return;
modal.classList.add("active");
overlay.classList.add("active");
}
function closeModal(modal) {
if (modal == null) return;
modal.classList.remove("active");
overlay.classList.remove("active");
}
Mein Controller
public function CreateYear(Request $request)
{
$validateData = $request->validate([
'name' => 'required|unique:academic_years,name'
]);
$data = new AcademicYear();
$data->name = $request->name;
$data->save();
$notification = array(
'message' => 'Academic Year Created Successfully!',
'alert-type' => 'success'
);
return redirect()->route('view.year')->with($notification);
}