将数据库值传递给模态弹出 - pass the database value to modal popup

我想把获取的数据库值传递给模态弹出。我已经从数据库中获取值，并列为表与分页。

'name'字段有链接，在触发链接时会显示模型弹出。我想列出我从laravel 5.3中的链接检查的名称的详细信息。

现在模型弹出触发'Modal Header 3'为所有链接。我想知道如何传递值模态弹出窗口，并显示特定id的细节。我想知道知道我是否需要单独的页面或控制器来做到这一点。在哪里写查询的模式弹出。如何显示特定Id的详细信息?

id name age

1 xx 26

2 yy 28

3z30

<table border = 1>
     <tr>
        <td>ID</td>
        <td>Passanger Name</td>
        <td>Destination</td>
        <td>Created Date</td>
     </tr>
     @foreach ($users as $user)
     <tr>
        <td>{{ $user->p_id }}</td>
        <td><a href="#" class="viewPopLink" role="button" data-id="{{ $user->p_id }}" data-toggle="modal" data-target="#myModal">{{ $user->p_name }}<a></td>
        <td>{{ $user->destination }}</td>
        <td>{{ $user->created_date }}</td>
    </tr>
     @endforeach
  </table>
{{$users->links()}}
 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header {{ $user->p_id }}</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

您可以按照@Komal建议的方式执行，但我不会再执行另一个AJAX请求，因为您已经在当前视图中拥有了模态所需的所有数据。这也节省了您编写另一个控制器。

将您需要的数据添加到<a>元素中，并通过为模态添加一个简单的'on load'方法，使用它将数据填充到模态弹出框中。

代码如下:

<td>
   <a href="#" class="viewPopLink" role="button" 
      data-id="{{ $user->p_id }}" data-name="{{ $user->p_name }}" data-age="{{ $user->p_age }}" 
      data-toggle="modal" data-target="#myModal">{{ $user->p_name }}<a>
</td>

将其添加到模态主体中:

<p>
  <span>ID</span><span id="modal_p_id"></span>
  <span>Name</span><span id="modal_p_name></span>
  <span>Age</span><span id="modal_p_age"></span>
</p>

将此脚本添加到视图中:

<script>
    /* populate the modal popup when it's launched, with the data provided by the launching button ....  */
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var id       = button.data('id');    // Extract info from data-* attributes
        var age      = button.data('age');
        var name     = button.data('name');
        // Update the modal's content
        var modal = $(this);
        modal.find('.modal-title').text('Information for Passenger ' + name);
        modal.find('#modal_p_id').text(id);
        modal.find('#modal_p_name').text(filename);
        modal.find('#modal_p_age').text(age);
    });
</script>

使用jquery ajax请求和获取用户数据来设置模式

 $(document).on('click', '.viewPopLink', function() {    
    var user_id = $(this).data('id');
    $.ajax({
      url: 'user/get-details',
      type: 'GET',
      data: 'id='+user_id,
      dataType: 'JSON',
      success: function(data, textStatus, jqXHR){
        var name = data.name;
        $('.modal-title').html('<span>Modal Header ' + name + '</span>');   
        $('#myModal').modal('show');
      },
      error: function(jqXHR, textStatus, errorThrown){
      },
    });    
  });

控制器方法

  //Get user data
  public function getDetails(Request $request)
  {
    $request_data = $request->all();
    $user_id = $request_data['id'];
    $user_data = User::where('id', $user_id)->first();
    return response()->json($user_data);
  }