將數據庫值傳遞給模態彈出

Question

我想將取出的數據庫值傳遞給模態popup.I已從數據庫中提取值並將其列爲帶有分頁的表。

'name'字段有鏈接，並會在觸發鏈接時顯示模型彈出窗口。我想列出從laravel 5.3鏈接中檢查的名稱的詳細信息。

現在模型彈出與'Modal Header 3'爲所有link.I想知道如何傳遞值模態彈出並顯示特定id的細節。我想知道我是否需要單獨的頁面或控制器來執行此操作。在哪裏寫模式彈出式查詢。如何顯示特定Id的詳細信息。

ID名稱年齡

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> 

Answer 1

使用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); 
    } 

Answer 2

你可以做到這一點@Komal建議的方式，但我不會做其他AJAX請求，因爲你已經擁有你所需要的當前視圖中的模態數據。這也可以避免編寫另一個控制器。

將需要的數據添加到<a>元素中，並通過爲模態添加一個簡單的「加載」方法來使用它將數據填充到模態彈出窗口中。

這是代碼。

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