CODEWITHSUNDEEP
javascriptphpjquerylaravellaravel-8
Reman Bala
Reman Bala

Reputation: 55

Show individual record on pop up Laravel

I am using a resource controller. All records are displayed on the dashboard. From here, I am trying to show an individual record after I click the show button.

The data is displayed on the pop up but it is the wrong one.

How can I solve this issue?

DashboardController.php

 public function index()
    {
        $frontend = Frontend::orderBy('created_at', 'desc')->paginate(10);
        return view ('dashboard')->with('frontends',$frontend);
    }

dashboard.blade.php

 <button type="submit" class="btn btn-secondary" onclick="showReviewModal()">
          <i class="fas fa-eye"></i>
 </button>

 <div id="modalReview"
        class="fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 p-6"
        style="display: none;">
        <div class="relative mx-auto w-auto max-w-2xl">
            <div class="bg-white w-full p-12 rounded-lg text-xl">
                <span><strong>Review</strong></span>
                <br />

                @if (count($frontends))
                    <p class="mt-6 text-justify">{{ $frontend->review }}</p>
                @endif
            </div>
        </div>
    </div>

script.js

function showReviewModal() {
    $("#modalReview").show();
    $("#modalShadow").show();
    
}

Upvotes: 0

Views: 312

Answers (1)

Charles
Charles

Reputation: 382

You can consider getting the record id using jQuery/JavaScipt e.g

var id = attr('id')

This is assuming you would have used a data attribute "data-id"

From there, you simply do an Ajax call to the server to call the individual record you want to display in the modal by passing back the record id.

<script>
$(document).ready(function(){
   $(this).click(function(){
    var id = attr('id')
    $.ajax({
     type: "GET",
     url: "/YOUR_URL/" + id,
     dataType: "json",
     headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
        success: function (response) {
          //CALL YOUR MODAL HERE AND LOAD IT WITH THE RETURN DATA
        }
      });
     </script>

Upvotes: 1

Related Questions