Quel est le moyen d'empêcher un modal dans Laravel de disparaître lors de la soumission ?

Question

J'ai une application Laravel qui a une boîte modale sur la page d'affichage qui permet à l'utilisateur d'ajouter des données à la base de données. Par défaut, le modal disparaît lorsque l'utilisateur clique sur le bouton de soumission et le backend renvoie une erreur. Je souhaite garder la boîte modale visible lorsqu'une erreur se produit. Comment puis-je atteindre cet objectif ?

Bouton qui déclenche le modal

<div><button class="add" data-modal-target="#modal-box">Add New Year</button></div>

Mon 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>

Boîte modale de commutation JavaScript

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");
}

Mon contrôleur

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);
}

Answer 1

Dans votre formulaire, vous pouvez ajouter une entrée masquée avec un ID de schéma. Lors de la soumission dans le contrôleur, vous obtiendrez l'identifiant et le renverrez sous forme de variable. Au retour de la vue, vous vérifiez si la variable existe et si oui, appelez le modal open correspondant :

Quelque part à votre avis, ajoutez :

@isset($activeModal)
    sssccc
@endisset