Shirley Rozenboim Shirley Rozenboim - 11 months ago 52
CSS Question

Multi-tabbed page with multiple modals (bootstrap)

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">&times;</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">&times;</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.

Answer Source

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">&times;</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">&times;</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>