我想根據 Laravel Blade 中的用戶 ID 顯示模態彈出窗口並將數據傳遞給模態

Question

當有人單擊查看詳細信息按鈕時，我想顯示一個包含單個用戶信息的彈出模式。 我想根據用戶 ID 傳遞用戶數據並在模態彈出窗口中顯示它。 我的數據在 $user 中。

當您單擊查看詳細信息時，我想在網站http://ssipgujarat.in/sgh201920/problem_statement.php 下的鏈接中完全完成，它會顯示該特定問題陳述的模式。 我希望這對你有意義。

@extends('layouts.app')

@section('content')
    <div class="container" id="blur-wrapper">
        <div class="row">
            @foreach($data as $user)
                @if($user->user_type == 'user')
                    <div class="col-md-6  col-sm-12">
                        <div class="card-wrapper">
                            <div class="info-wrapper">
                                <h2>{{ $user->first_name }} {{ $user->last_name }}</h2>
                                <h6>{{ $user->email }}</h6>
                                <hr/>
                                <h6>Department: {{$user->StudentProfile->department}}</h6>
                                <h6>Sem: {{ $user->StudentProfile->sem }}</h6>
                            </div>
                            <div class="button-wrapper">
                                <form action="{{ $user->id }}">
{{--                                    <button class="btn btn-primary" id="view-detail">View Details</button>--}}
                                    <a class="btn btn-info" id="view-detail" href="{{ $user->id }}">View Details</a>
                                </form>
                                <form method="POST" action="/admin/reject/{{ $user->id }}">
                                    @csrf
                                    <button class="btn btn-danger" type="submit">Delete Account</button>
                                </form>
                            </div>
                        </div>
                        <div class="popup">
                            <h2>{{  }}</h2>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
@endsection

Answer 1

假設您使用的是引導程序，則在查看詳細信息按鈕上，您的代碼應該

<input type="button" class="button_edit" data-toggle="modal" data-target="#exampleModal{{$user->id}}" value="Edit"/>

在您的路線上

在您的模態代碼上

    @foreach($users as $user)
    <div class="modal fade" id="exampleModal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Edit Brand
                    </h5>`enter code here`
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

      <div class="col-md-offset-2">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" class="form-control" value="{{$user->first_name}}">
        </div>

        <input type="submit" value="Edit" class="btn btn-success">

    </div>

                </div>

            </div>
        </div>
    </div>
    @endforeach

Answer 2

使用 jQuery 和 Ajax 以及數據輸入屬性完成此操作：

刀片（CSS：bulma）

<!-- list of elements -->
<li class="dashboard">
  <p class="img-hover-dashboard-info showQuickInfo" data-entry="{{ $highlight->id }}"></p>
</li>

<!-- MODAL -->
<div class="modal" id="QuickInfo">
  <div class="modal-background"></div>

  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Quick-Info</p>
      <button class="delete closeQuickInfo" aria-label="close"></button>
    </header>
    <section class="modal-card-body">

     <!-- PUT INFORMATION HERE, for example: -->

        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Rubrik</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <input class="input" id="category" type="text" value="" readonly>       
              </div>         
            </div>
          </div>
        </div>


        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">Kunde</label>
          </div>
          <div class="field-body">
            <div class="field">
              <input class="input" id="customer" type="text" value="" readonly>       
            </div>
          </div>
        </div>

      <!-- END PUT INFORMATION HERE -->

    </section>
    <footer class="modal-card-foot">
      <button class="button is-link closeQuickInfo">Schließen</button>
    </footer>
  </div>
</div>

jQuery

$(document).ready(function () {
  $('.showQuickInfo').click(function () {
    $('#QuickInfo').toggleClass('is-active'); // MODAL

    var $entry = this.getAttribute('data-entry');
    getEntryData($entry);
  });
}

function getEntryData(entryId) {
  $.ajax({
    url: '/entries/getEntryDataForAjax/' + entryId,
    type: 'get',
    dataType: 'json',
    success: function (response) {
      if (response.length == 0) {
        console.log( "Datensatz-ID nicht gefunden.");
      } else { 
        // set values
        $('#category').val( response[0].category );         
        $('#customer').val( response[0].customer );
        // and so on
      }
    }
  });
}

控制器

 public function getEntryDataForAjax(int $id) 
    {
      $entries = new Entry(); 
      $entry = $entries->where('id', $id)->get();

      echo json_encode($entry);
    }