While trying to implement the fix for the datatables.net header sizing problem (headers aren't sized to the table body when created in a hidden tab), I discovered that my event listener function is never called when I run the page from within electron (2.0.9). When I run the same html page within a browser, the event listener runs. I'm using Bootstrap v4.0.0, and the datatables.net-bs4 npm package (version 1.10.19).
Here is the applicable html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../vendor/jquery/jquery.js"></script>
<script src="../vendor/jquery/jquery.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> -->
<script src="../vendor/bootstrap/js/bootstrap.js"></script>
<script src="../vendor/datatables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="../vendor/datatables/Plugins/Scroller-1.5.0/js/dataTables.scroller.js"></script>
<!-- <script src="../vendor/bootstrap/js/bootstrap.min.js"></script> -->
<!-- <script src="../vendor/datatables/Plugins-master/pagination/full_numbers_no_ellipses.js"></script> -->
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../vendor/datatables/DataTables-1.10.18/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/add_edit_group_window.css">
<link rel="stylesheet" href="../vendor/datatables/DataTables-1.10.18/css/jquery.dataTables.css">
<link rel="stylesheet" href="../vendor/datatables/Plugins/Scroller-1.5.0/css/scroller.bootstrap.css">
<!-- Icon Library-->
<link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../vendor/datatables/DataTables-1.10.18/css/jquery.dataTables.css">
</head>
<body>
<br>
<div class="container card main">
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" id="tab-1" href="#tab-1-settings">Tab1 Settings</a>
</li>
<li class="nav-item">
<a class="nav-link nav-tab-settings" data-toggle="tab" role="tab" id="tab-2" href="#tab-2-settings">Tab2 Settings</a>
</li>
<li class="nav-item">
<a class="nav-link nav-tab-settings" data-toggle="tab" role="tab" id="tab-3" href="#tab-3-settings">Tab3 Settings</a>
</li>
<li class="nav-item">
<a class="nav-link nav-tab-settings" data-toggle="tab" role="tab" href="#tab-4-settings">Tab4 Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- tab-1 Settings -->
<div id="tab-1-settings" class="container-fluid tab-pane active"><br>
<br>
stuff
</div>
<!-- tab-2 settings -->
<div id="tab-2-settings" class="container-fluid tab-pane fade table-responsive"><br>
<table class="table table-bordered table-hover table-condensed" id="tab2Tbl" cellspacing="0">
<thead>
<tr>
<th>Table2</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody id="tab-2-body-tab">
</tbody>
</table>
</div>
<!-- tab-3 settings -->
<div id="tab-3-settings" class="container tab-pane fade table-responsive"><br>
<table class="table table-bordered table-hover table-condensed" id="tab3Tbl" cellspacing="0">
<thead>
<tr>
<th scope="col">Table3</th>
<th scope="col">Col2</th>
<th scope="col">Col3</th>
<th scope="col">Col4/th>
<th scope="col">Col5</th>
</tr>
</thead>
<tbody id="tab-3-body-tab">
</tbody>
</table>
</div>
<!-- tab-4-settings -->
<div id="tab-4-settings" class="container tab-pane fade"><br>
<h3>tab-4-settings</h3>
</div>
</div>
</div>
<div class="container card" style="text-align: right;">
<br>
<p><button class="btn" id="submitButton" type="button" disabled data-toggle="tooltip">Add New</button>
<button class="btn" id="cancelButton" type="button">Cancel</button></p>
</div>
</body>
<script src="page.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
console.log("setting up event for bootstrap");
console.log(navigator.appName);
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log('show - after the new tab has been shown');
});
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
console.log('show - before the new tab has been shown');
});
});
</script>
In addition, I also had put in another event listener in the $(document).ready function,
$('#tab-2').click(function (e) {
console.log("clicking tab-2");
e.preventDefault();
// $(this).tab('show');
console.log($(this));
console.log($(this).tab);
console.log($($.fn.dataTable.tables( true ) ));
$('.table').css('width', '100%');
$('.dataTables_scrollHeadInner').css('width', '100%');
let x = $('#tab-2').find("th");
console.log(x[0]);
console.log($(x[0]));
console.log($(x[0]).css("width"));
console.log($($.fn.dataTable.tables( true ) ));
console.log($($.fn.dataTable.tables( true ) ).DataTable());
});
This gets called when I click on the tab, and the values are there for all but the fn.dataTable log lines. The console.log for fn.dataTable.tables show an empty array, and a _Api object that appears to be empty of data.
