How can I fetch detail of each perticular ID? - laravel

Question

In My list view I have all the details of leave. But when I click on details It will display me a Pop-up. In Pop up box it has to fetch and give me all the details of particular field but instead of that it always give me details of last inserted record
Here Is code of my list file
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Employee Name</th>
<th>Leave Type</th>
<th>Leave Duration</th>
<th>Applied On</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if($allLeaves != null)
#foreach($allLeaves as $leave)
<tr>
<td> {{ $leave->username }} </td>
<td> {{ $leave->typeOfLeave }} </td>
<td>
{{ $leave->startDate }} To
{{ $leave->endDate }}
</td>
<td> {{ $leave->startDate }} </td>
<td>
#if($leave['status']=='Pending')
<span class="btn btn-warning">Pending</span>
#elseif($leave['status']=='Approved')
<span class="btn btn-success">Approved</span>
#else
<span class="btn btn-danger">Rejected</span>
#endif
</td>
<td>Details</td>
</tr>
</tbody>
</table>
and in same page i wrote code of fetch records
<form id="myform" class="form-horizontal" method="POST" action="{{ route('approve_leave', $leave->id) }}">
#csrf
<div class="card-body">
<div class="row">
<label class="col-md-6"><strong> Employee Name</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="emp_name" disabled value="{{$leave->username}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Leave Type</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="leavetype" disabled value="{{$leave->typeOfLeave}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Leave Duration</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="leaveduration" disabled value="{{ $leave->startDate }} To {{ $leave->endDate }}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Reason</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="reason" disabled value="{{$leave->reasonForLeave}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Applied on</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="appliedon" disabled value="{{$leave->startDate}}" style="border:none">
</div>
</div>
<br>
<div class="row">
<label class="col-md-6"><strong>Action</strong></label>
<div class="col-md-6">
<select class="form-control" id="status" name="status" value="{{$leave->status}}">
<option value="Pending" selected="selected">Pending</option>
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
</select>
</div>
</div>
#endforeach
<br>
<div class="row">
<label class="col-md-6"><strong>Reason For Action</strong></label>
<div class="col-md-6">
<input type="text" class="form-control" id="reason" name="reasonForAction" placeholder="Reason Of Action" style="border:none">
</div>
</div>
<br>
<div class="modal-footer">
<button type="submit" class="btn btn-info waves-effect" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
And This is the code i wrote in controller file
//Code Of list view
public function listOfLeave()
{
$allLeaves = LeaveManagement::all();
return view('pages.leavelist', compact('allLeaves'));
}
//Code of click on details button and fetch record of that particular id
public function handleLeave($id)
{
$leave = LeaveManagement::find($id);
return view('pages.leavelist', compact('leave', 'id'));
}
//code of approve reject leave and change the status of leave
public function approveLeave(Request $request ,$id)
{
$leave = LeaveManagement::find($id);
$leave->status = $request->get('status');
$leave->reasonForAction = $request->get('reasonForAction');
$leave->save();
return view('pages.leavelist');
}

Answer 1

If you want to show data according to user's id then you have to pass each field like data-fieldname and then you can fetch that field's data as shown in script.
Button:
<button type="button"
class="btn btn-xs btn-default confirm-modal"
data-toggle="modal"
data-target="#model"
data-id="{{ $singleRecord->id }}"
data-name="{{ $singleRecord->full_name }}"
data-leave_reason="{{ $singleRecord->leave_reason }}"
data-from_date="{{ date('d-F-Y', strtotime($singleRecord->from_date)) }}"
data-to_date="{{ date('d-F-Y', strtotime($singleRecord->to_date)) }}"
>Details </button>
And add script
<script type="text/javascript">
$('.confirm-modal').click(function (event) {
$('.employee_name').text($(this).data('name'));
$('#from_date').text($(this).data('from_date'));
$('#to_date').text($(this).data('to_date'));
$('#total_leaves').text($(this).data('total_leaves'));
$('.leave_reason').text($(this).data('leave_reason'));
})
</script>
In model div, add each id to display that data.
<div class="col-md-12">
<label for="to_date">To Date:</label>
<span id="to_date"></span>
Hope this helps :)

Answer 2

Edit your modal button and modal id like below,
<td>Details</td>
and your modal,
<div id="details_{{ $leave->id }}" class="modal fade edit-form" role="dialog">
or you can use javascript to populate your field,
<button type="button" class="btn btn-xs btn-default confirm-modal" data-toggle="modal" data-target="#details"
data-leave="{{ $leave }}">Details </button>
<script type="text/javascript">
$(document).on('click', '.confirm-modal', function(e){
var data = $(this).data('leave');
$('#emp_name').text(data.username);
$('#from_date').text(data.from_date');
$('#to_date').text(data.to_date);
$('#total_leaves').text(data.total_leaves);
$('#leave_reason').text(data.leave_reason);
})
</script>