如何获取每个垂直ID的详细信息？

Question

在我的列表视图中，我具有请假的所有详细信息。但是，当我单击详细信息时，它将显示一个弹出窗口。在“弹出”框中，它必须获取并提供给我特定字段的所有详细信息，但取而代之的是，它始终为我提供最后插入的记录的详细信息

这是我的列表文件的代码

 <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><a href = "{{ route( 'handle_leave', $leave->id)}}" data-toggle="modal" data-target="#details" class="btn btn-info text-white">Details</a></td>
    </tr>                                    
  </tbody>
</table>

在同一页面中，我编写了获取记录的代码

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

这是我在控制器文件中编写的代码

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

如果要根据用户ID显示数据，则必须传递data-fieldname之类的每个字段，然后可以如脚本中所示获取该字段的数据。

按钮：

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

并添加脚本

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

在模型div中，添加每个ID以显示该数据。

<div class="col-md-12">
      <label for="to_date">To Date:</label>
      <span id="to_date"></span>

希望这会有所帮助：）

Answer 2

按如下所示编辑您的模式按钮和模式ID，

<td><a href = "{{ route( 'handle_leave', $leave->id)}}" data-toggle="modal" data-target="#details_{{ $leave->id }}" class="btn btn-info text-white">Details</a></td>

和您的情态，

<div id="details_{{ $leave->id }}" class="modal fade edit-form" role="dialog">

或者您可以使用JavaScript填充字段，

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