Displaying data from Blade model using the click function - php

Question

I am using the button to display the details of the particular person using the data-toggle="modal" but the button is not performing any action. When I click the button I am not able to display any details of the user.
Route:
Route::get('document', 'PatientController#show');
Controller:
public function show()
{
$patient_user=patient_user::all();
return view('document')->with('patient_user',$patient_user);
}
View:
<form id="myForm" method="get">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="panel-body">
<table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
<thead>
<tr>
<th>Patient ID</th>
<th>Patient Name</th>
<th>Full Name</th>
<th>DOB</th>
<th>Ref. Name</th>
<th>Payment</th>
<th>Doc Status</th>
<th>Appointment</th>
<th>Action</th>
</tr>
</thead>
#foreach($patient_user as $key=>$row)
<tbody>
<tr>
<td>{{$row->patient_id}}</td>
<td>{{$row->patient_firstname}}</td>
<td>{{$row->patient_firstname}} {{$row->patient_lastname}}</td>
<td>{{$row->dob}}</td>
<td>{{$row->refering_physician_name}}</td>
<td>{{$row->dob}} </td>
<td>{{$row->dob}}</td>
<td>{{$row->app_date}}</td>
<td class="center">
<div class="visible-md visible-lg hidden-sm hidden-xs">
<i class="fa fa-edit"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-times fa fa-white"></i>
</div>
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div id="static" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false" style="display: none;">
<div class="modal-body">
<h4><i>Patient Details</i></h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="col-md-6">First Name</div>
<div class="col-md-5" id="fname"> {{ $row->patient_firstname}} </div>
</div>
<br>
<div class="col-md-12">
<div class="col-md-6">Middle Name</div>
<div class="col-md-5" id="mname"> {{ $row->middle_name}} </div>
</div>
<br>
<div class="col-md-12">
<div class="col-md-6">Last Name</div>
<div class="col-md-5" id="lname"> {{ $row->patient_lastname}} </div>
</div>
</div>
</div>
</form>
jquery:
<script type="text/javascript">
$('#static').on('show', function(e)
{
e.preventDefault();
var link = e.relatedTarget(),
modal = $(this),
patient_firstname = link.data("patient_firstname"),
middle_name = link.data(middle_name),
patient_lastname = link.data("patient_lastname"),
modal.find("#fname").val(patient_firstname);
modal.find("#mname").val(middle_name);
modal.find("#lname").val(patient_lastname);
});
</script>
where #static is my modal Id and the value within find are the id's of the particular fields and val are the database values.

Answer 1

The problem is that you're requesting data from attributes that are not set.
patient_firstname = link.data("patient_firstname"),
The above part is trying to retrieve the value of the attribute data-patient_firstname. Since the original link does not have this attribute there won't be any data.
Change
<i class="fa fa-eye"></i>
Into
<a href='#' data-toggle="modal"
data-patient_firstname="{{$row->patient_firstname}}" <-- do this for all requested vars
class="btn btn-xs btn-green tooltips" data-id="{{ $row->patient_id}}" data-target="static" onclick="pat_det{{ $row->patient_id }}" data-placement="top" data-original-title="View" id="pat_det"><i class="fa fa-eye"></i></a>
That way the data-* attributes will be availble.