dowm41315
dowm41315
2016-10-03 08:16

将数据库值传递给模态弹出窗口

I want to pass the fetched database value to modal popup.I have fetched values from database and listed as table with pagination.

'name' field has link and will show model popup while triggering a link.I want to list the details of name which I check from the link in laravel 5.3.

Now model pop up trigered with 'Modal Header 3' for all link.I want to know how to pass the value modal popup and show the details of particular id. I want to know to know shall I need separate page or controller to do this.Where to write the query for modal popup.How can I display the details of specific Id.

id name age

1 xx 26

2 yy 28

3 zz 30

<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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • dongyang0005 dongyang0005 5年前

    Use jquery ajax request and get user data to set modal

     $(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){
    
          },
        });    
      });
    

    Controller method

      //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);
      }
    
    点赞 评论 复制链接分享
  • dongpao9165 dongpao9165 5年前

    You can do it the way @Komal suggested, but I would not do another AJAX request since you already have all the data you need for the modal in your current view. This saves you also from writing another controller.

    Add the data you need into the <a> element and use it to fill in the data into the modal popup by adding a simple 'on load' method for the modal.

    Here is the code.

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

    Add this into the modal body:

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

    Add this script into your view:

    <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>
    
    点赞 评论 复制链接分享