I am trying to create a page that has multiple tabs. In each tab, there is a table and on each row there is a button that opens up a modal. My code works fine as long as only one of my tabs have a modal. However, once I have 2 tabs or more with modals, the content of both tabs will show up on one page, instead of being separated into separate tabs.
Here is my code:
edit-profile.ejs:
<ul class="nav nav-tabs tabs-left">
<li class="active"><a href="#edit1" data-toggle="tab">Edit 1</a></li>
<li><a href="#edit2" data-toggle="tab">Edit 2</a></li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<% include ./partials/edit-profile/_edit1%>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<% include ./partials/edit-profile/_edit2%>
</div>
</div>
<center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>
In my _edit1.ejs partial, I have:
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1@test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2@test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit1-modal" class="modal fade" 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"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit1-table').DataTable();
} );
</script>
In _edit2.ejs, I have similar content:
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1@test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
<td>user2@test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" class="modal fade" 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"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>
Can anybody help me figure out why my tables are showing up on the same page when both tabs have modals? The modals have different IDs.
Here, it's working
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <ul class="nav nav-tabs tabs-left"> <li class="active"><a href="#edit1" data-toggle="tab">Edit 1</a></li> <li><a href="#edit2" data-toggle="tab">Edit 2</a></li> </ul> <!-- Tab content --> <div class="col-xs-9"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="edit1"> <div id="edit1"> <table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive"> <thead> <tr> <th>User ID</th> <th>Email</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td> <td>user1@test.com</td> <td>Address1</td> </tr> <tr> <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td> <td>user2@test.com</td> <td>Address2</td> </tr> </tbody> </table> <div id="edit1-modal" class="modal fade" 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"> Edit 1 </h4> </div> <div class="modal-body"> <% include ./_edit1-form %> <div class="modal-footer"> <button type="submit" class="btn btn-default pull-left">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="edit2"> <div id="edit2"> <table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive"> <thead> <tr> <th>User ID</th> <th>Email</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td> <td>user1@test.com</td> <td>Address1</td> </tr> <tr> <td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> Microsoft</td> <td> User 2</td> <td>user2@test.com</td> <td>Address2</td> </tr> </tbody> </table> <!-- Modal --> <div id="edit2-modal" class="modal fade" 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"> Edit 2 </h4> </div> <div class="modal-body"> <% include ./_edit2-form %> <div class="modal-footer"> <button type="submit" class="btn btn-default pull-left">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </div> </div> <center> <button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button> </center> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.