Apakah cara untuk mengekalkan modal dalam Laravel daripada hilang semasa diserahkan?

Question

Saya mempunyai aplikasi Laravel yang mempunyai kotak modal pada halaman paparan yang membolehkan pengguna menambah data ke pangkalan data. Secara lalai, modal hilang apabila pengguna mengklik butang hantar dan bahagian belakang mengembalikan ralat. Saya mahu memastikan kotak modal kelihatan apabila ralat berlaku. Bagaimanakah saya boleh mencapai matlamat ini?

Butang yang mencetuskan modal

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

Modal saya

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

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

Pengawal Saya

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

Dalam borang anda, anda boleh menambah input tersembunyi dengan ID skema. Apabila menyerahkan dalam pengawal anda akan mendapat id dan mengembalikannya sebagai pembolehubah. Apabila mengembalikan paparan, anda menyemak sama ada pembolehubah wujud dan jika ya, panggil modal yang sepadan terbuka :

Di suatu tempat pada pandangan anda tambahkan:

@isset($activeModal)
    sssccc
@endisset