Fetch data into modal popup using ajax in laravel

Question

I am trying to fetch data from my database into a modal popup and make it dynamic... I'm also a bit confused on how to make the modal id unique for each data on the table... the "button" details pops up the modal.

This is my Table the buttons pops up a modal

This is my controller

public function show($upi)
{   
    $Patient = Patients::where('upi', '=', $upi)->first();
    return Response::json($Patient);
}

This is my Route

Route::get('show-details/{upi}', [BssDashboardController::class, 'show'])->name('details.show');

This is my Ajax script

<script>
    $(document).ready(function () {
        $('body').on('click', '#show-details', function (){
            var patientURL = $(this).data('url');
            $.get('show-details/' + patientURL', function (d) {

                $('#diagnosisModal').modal('show');
                $('#date').text(data.date);
                $('#age').text(data.age);
                $('#gender').text(data.gender);
                $('#plan').text(data.plan);
                $('#authcode').text(data.authcode);
                $('#findings').text(data.findings);
                $('#compliants').text(data.compliants);
                $('#investigation').text(data.investigation);
            });
        })
    });
  </script>

This is my Button

<a href="javascript:void(0)" id="show-details" data-url="{{ $item->upi }}">
                                                <button class="btn-primary px-3 py-1">Details</button>
                                               </a>

This is my modal

<div class="modal fade" id="diagnosisModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                <div class="col-8 pt-3">
                                                                    <div class="d-flex flex-row"><label><b>Name:</b></label><div class="fw-600" id="name"></div></div>
                                                                    <div class="d-flex flex-row"><label><b>DOB:</b></label><div class="fw-600" id="date">16-03-1990</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Age:</b></label><div class="fw-600" id="age">31 Years</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Sex:</b></label><div class="fw-600" id="gender">Female</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Plan:</b></label><div class="fw-600" id="plan">Equity</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Authcode:</b></label><div class="fw-600" id="authcode">-</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Findings:</b></label><div class="fw-600" id="findings">Pregnant</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Complaints:</b></label><div class="fw-600" id="compliants">ANC</div></div>
                                                                    <div class="d-flex flex-row"><label><b>Investigations:</b></label><div class="fw-600" id="investigation">ANC</div></div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="pt-4" style="width: 5rem;height: 4rem;"><img class="w-100" src="{{ asset('img/drake.jpg') }}" id="image" alt=""></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="background-color:#ff3030;border-radius:.7rem">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

Does this answer your question? [Dynamic content in Bootstrap modal and dynamic data in Ajax \[Laravel\]](https://stackoverflow.com/questions/42333434/dynamic-content-in-bootstrap-modal-and-dynamic-data-in-ajax-laravel) — Keyvan Gholami, Apr 24 '22 at 05:57
Does this answer your question? [jQuery ID selector works only for the first element](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element) — Don't Panic, Apr 24 '22 at 07:40

Fetch data into modal popup using ajax in laravel

0 Answers0