Skip to content

Instantly share code, notes, and snippets.

@julianjupiter

julianjupiter/bs_table_modal.html

Last active October 16, 2023 23:06
Show Gist options
  • Save julianjupiter/0c56f51b60d1977869e6 to your computer and use it in GitHub Desktop.
Save julianjupiter/0c56f51b60d1977869e6 to your computer and use it in GitHub Desktop.
Download ZIP
Get the specific id and display its values to a Bootstrap modal
Raw
bs_table_modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h2>Hello World</h2>
<table class="table table-condensed">
<thead>
<tr>
<td>ID</td>
<td>Last Name</td>
<td>First Name</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Gates</td>
<td>Bill</td>
<td>
<button type="button" data-id="1" class="btn btn-default btn-view" data-toggle="modal" data-target="#myModal">View</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Jobs</td>
<td>Steve</td>
<td>
<button type="button" data-id="2" class="btn btn-default btn-view" data-toggle="modal" data-target="#myModal">View</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">View Person</h4>
</div>
<div id="personDetails" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#myModal").modal({
keyboard: true,
backdrop: "static",
show: false,
}).on("show.bs.modal", function(event){
var button = $(event.relatedTarget); // button the triggered modal
var personId = button.data("id"); //data-id of button which is equal to id (primary key) of person
/*
Although below is working to get and display values for id (personId),
it is recommended that they be fetched via ajax ($.ajax()) that queries data
from database based on personId
*/
var lastName = $(event.relatedTarget).closest("tr").find("td:eq(1)").text();
var firstName = $(event.relatedTarget).closest("tr").find("td:eq(2)").text();
//displays values to modal
$(this).find("#personDetails").html($("<b>ID: " + personId + "<br>Last Name: " + lastName + "<br>First Name: " + firstName + "</b>"))
}).on("hide.bs.modal", function (event) {
$(this).find("#personDetails").html("");
});
});
</script>
</body>
</html>
@foxtrime
Copy link

Thank you Bro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment