Bootstrap how to show data from row in modal window - html

Question

Want to show modal window in the center of webbrowser and show user information from my bootstrap td row which user clicked. Can you help me out? Below find my current code. I can't find the way
Here below you see i made tr as modal and put data-id to 1:
....
<tbody>
#For Each item In Model.Transports
Dim currentItem = item
#<tr data-toggle="modal" data-id="1" data-target="#orderModal">
<td class="col-lg-4 text-center vert-align_td">#item.Name</td>
<td class="col-lg-4 text-center vert-align_td">#item.Surname</td>
<td class="col-lg-4 text-center vert-align_td">#item.Age</td>
....
Heres my modal window where i want to put all information:
#<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
Information for lp number:
Name:
Surname:
Age:
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
and here is my JS:
$(function () {
$('#orderModal').modal({
keyboard: true,
backdrop: "static",
show: false,
}).on('show', function () {
var getIdFromRow = $(event.target).closest('tr').data('Lp');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow + '</b>'))
});
});
EDITED (for further duscussions:)
...
#For Each item In Model.Transports
Dim currentItem = item
#<tr data-toggle="modal" data-target="#myModal" data-id="12">
<td class="col-lg-1">#item.Lp</td>
<td class="col-lg-1">#item.Name</td>
Modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="orderDetails">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
$('#myModal').on('show.bs.modal', function (event) {
//var getIdFromRow = $(event.relatedTarget).attr('data-id');
// if you wnat to take the text of the first cell
var getIdFromRow1 = $(event.relatedTarget).find('td:first-child').text();
var getIdFromRow2 = $(event.relatedTarget).find('td:second-child').text();
$(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow1 + '</b>'))
$(this).find('#orderDetails').html($('<b> Information for DataPrzyjazdu: ' + getIdFromRow2 + '</b>'))
});
EDIT2:
$('#myModal').on('show.bs.modal', function (event) {
var getIdFromRow1 = $(event.relatedTarget).find('td:first-child').text();
$(this).find('#orderDetails').html($('<b> Information for Lp: ' + getIdFromRow1 + '</b>'))
var getIdFromRow2 = $(event.relatedTarget).find('td:nth-child(2)').text();
$(this).find('#orderDetails').html($('<b> Information for Data przyjazdu: ' + getIdFromRow2 + '</b>'))
});
Modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="orderDetails">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
table:
#<tr data-toggle="modal" data-target="#myModal" data-id="12">
<td class="col-lg-1 text-center vert-align_td">#item.Lp</td>
<td class="col-lg-1 text-center vert-align_td">#item.DataPrzyjazdu</td>

Answer 1

You have some problems with your code:
You should use show.bs.modal event instead of show event. docs.
You should use $(event.relatedTarget) (return the tr) instead of $(event.target) (return the modal).
$('#myModal').on('show.bs.modal', function (event) {
//var getIdFromRow = $(event.relatedTarget).attr('data-id');
// if you wnat to take the text of the first cell
var getIdFromRow = $(event.relatedTarget).find('td:first-child').text();
$(this).find('#orderDetails').html($('<b> Information for LP: ' + getIdFromRow + '</b>'))
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
<tr data-toggle="modal" data-target="#myModal" data-id="12">
<td>ID is 12</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
</tr>
</table>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="orderDetails">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>