我想显示模态弹出窗口，并根据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

使用jQuery和Ajax以及数据输入属性：

blade（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
      }
    }
  });
}

Controller

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

      echo json_encode($entry);
    }

Answer 2

假设您正在使用引导程序，则在查看详细信息按钮上，您的代码应该

<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

``