[英]pass the database value to modal popup
我想將獲取的數據庫值傳遞給模式彈出窗口。我已經從數據庫中獲取了值,並以分頁的形式列在表中。
名稱字段具有鏈接,並在觸發鏈接時顯示模型彈出窗口。我想列出我從laravel 5.3中的鏈接檢查的名稱的詳細信息。
現在所有鏈接的模型彈出窗口都用'Modal Header 3'觸發了。我想知道如何傳遞值modal彈出窗口並顯示特定id的詳細信息。 我想知道是否需要單獨的頁面或控制器來執行此操作。在何處編寫用於模式彈出窗口的查詢。如何顯示特定ID的詳細信息。
身份證名年齡
1 xx 26
2年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">×</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>
元素中,並通過為模態添加簡單的“加載”方法,將其用於將數據填充到模態彈出窗口中。
這是代碼。
<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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.