DataTable selector has black box around it - javascript

Not sure where I've gone wrong, here's the issue:
Here's my code:
<?php
require 'config.php';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vendor list - VendorBase Pro</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<!-- Bootstrap core CSS -->
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>
<link href="DataTables/DataTables-1.10.20/css/jQuery.dataTables.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<style>
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
td {
overflow:hidden;
table-layout: fixed;
max-width: 500px;
overflow-wrap:break-word;
}
</style>
<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="assets/img/sidebar-5.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text">
VendorBase Pro
</a>
</div>
<ul class="nav">
<li>
<a href="dashboard.php">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="user.php">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
<li class="active">
<a href="table.php">
<i class="pe-7s-note2"></i>
<p>Vendor List</p>
</a>
</li>
<li>
<a href="typography.html">
<i class="pe-7s-news-paper"></i>
<p>Reports</p>
</a>
</li>
<li>
<a href="icons.html">
<i class="pe-7s-science"></i>
<p>Settings</p>
</a>
</li>
<li class="active-pro">
<a href="upgrade.html">
<i class="pe-7s-rocket"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vendor List</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
<p class="hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret hidden-sm hidden-xs"></b>
<span class="notification hidden-sm hidden-xs">5</span>
<p class="hidden-lg hidden-md">
5 Notifications
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
<p class="hidden-lg hidden-md">Search</p>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
<p>Account</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<p>
Dropdown
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="#">
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg hidden-md"></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Vendor Database</h4><br>
<table id='tblVendor' class='display cell-border compact stripe' style="width:100%">
<thead>
<tr>
<th>View</th>
<th>Vendor</th>
<th>Company</th>
<th>Type</th>
<th>Status</th>
<th>Owner</th>
<th>Business Email</th>
<th>Department</th>
<th>Descr</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© <script>document.write(new Date().getFullYear())</script> DeedsTech, Inc., Third Party Risk Management Solutions.
</p>
</div>
</footer>
</div>
<!-- Central Modal Medium Info -->
<div class="modal fade" id="activev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
ab officiis totam.</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Medium Info-->
<!-- make rows in tables clickable -->
<!--
<script>
document.addEventListener("DOMContentLoaded", () => {
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () => {
window.location.href = row.dataset.href;
});
});
});
</script>
-->
</body>
<!-- Core JS Files -->
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.12.0/js/mdb.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</html>
<script>
function format ( d ) {
return '<table>'+
'<tr>'+
'<td><b>Business Owner:</b></td>'+
'<td>'+d.owner+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>Contact Email:</b></td>'+
'<td>'+d.owner_email+'</td>'+
'</tr>'+
'<tr>'+
'<td><b>Description:</d></td>'+
'<td style="max-width=280px;">'+d.descr+'</td>'+
'</tr>'+
'<tr>'+
'<td>More Info:</td>'+
'<td><button>View</button></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var dt = $('#tblVendor').DataTable( {
"responsive": true,
"dom": 'Bfrtip',
"buttons":[
{ extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
{ extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
{ extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
{ extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' }
],
"processing": true,
"serverSide": true,
"ajax": "ajax.php",
'serverMethod': 'post',
"columns": [
{
"width": "5%",
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "name" },
{ "data": "company" },
{ "data": "type" },
{ "data": "status" },
{ "data": "owner", "visible": false},
{ "data": "owner_email", "visible": false},
{ "data": "descr", "visible": false},
{ "data": "dept" },
], "order": [[1, 'asc']],
} );
new $.fn.dataTable.Buttons( dt, {
buttons: [
{
className: 'btn btn-info btn-fill',
text: 'Add New Vendor',
action: function ( e, dt, node, conf ) {
window.location.replace("new.php");
},
},
]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#tblVendor'+id+' td.details-control').trigger( 'click' );
} );
} );
dt.buttons( 1, null ).container().appendTo(
dt.table().container()
);
} );
</script>
I have literally tried everything, even searching through CSS (no changes permanently made) and making changes to color schemes and what not. There literally is nothing that has worked so I'm reaching out to you guru's to see where I'm going wrong. I'm hoping it's just a silly oversight and no drastic changes but I'm open to anything.

Related

Append specific array object data to individual HTML table - jQuery

How do I use JSON data as data for HTML tables? I'm creating a website that uses bootstrap modal, inside the modal is a table. These modals are several in count and is differentiated from others with ID. Now, I have this JSON file (its long so I trimmed it). The purpose is to display the data inside the nested objects to appropriate table. Example:
{
"AFN1":{
"Filename":"Agaton_TCB_1",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-08-2022 21:34 UTC",
"Filesize":"524kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_1.pdf"
},
"AFN2":{
"Filename":"Agaton_TCB_2",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-09-2022 01:09 UTC",
"Filesize":"244kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_2.pdf"
}
}
The nested data ofAFN1 goes only to a table with the matching id AFN1
<table class="file-details" id="AFN1">
<th colspan=2>File Information</th>
</table>
That results to this: Figure 1 Code of Figure 1 is below
<table class="file-details" id="AFN1">
<th colspan=2>File Information</th>
<tr>
<td>Filename</td>
<td>Agaton_TCB_1</td>
</tr>
<tr>
<td>Filetype</td>
<td>Portable Document Format (PDF)</td>
</tr>
<tr>
<td>Filesize</td>
<td>524kb</td>
</tr>
<tr>
<td>Release Date</td>
<td>Apr-08-2022 21:34 UTC</td>
</tr>
<tr>
<td>Download URL</td>
<td colspan=2><a href="https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_1.pdf" download>Download File</a></td>
</tr>
</table>
Now, when I'm on the AFN3 table (which is located in different modal div), the nested data of AFN3 does get appended to that specific table, but the nested data of AFN1 and AFN2 are also appended to table AFN3.
Supposedly to be like Figure 1, the AFN3 table looks like this, you can see that nested data AFN1 and AFN2 are also included in the table of bulletin 3 (AFN3).
How do I fix this? Each nested data should be placed to individual tables identified by ID. The full codes are the following (Ignore the hrefs in the of HTMl and other srcs in other files)
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Meta and Informations Section -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulchives | (2022) Agaton TCB</title>
<meta name="description" content="Collection of all PAGASA issued bulletins for 2022 Agaton (Megi).">
<meta name="keywords" content="Agaton, archive, bagyo, bulletin, forecast, Goni, JMA, JTWC, Megi, Odette, PAGASA, TCB, typhoon, weather, Yolanda">
<meta property="og:title" content="Bulchives | /2022/Agaton/TCB">
<meta property="og:description" content="Collection of all PAGASA issued bulletins for 2022 Agaton (Megi).">
<!-- CSS Components Section -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo Black">
<link rel="stylesheet" href="/css/backgroundImage.css">
<link rel="stylesheet" href="/css/pageContainer.css">
<link rel="stylesheet" href="/css/modifiedBootstrap4.css">
<link rel="stylesheet" href="/css/navbar.css">
<link rel="stylesheet" href="/css/contentWrapper.css">
<link rel="stylesheet" href="/css/footer.css">
<!-- JS Components Section -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/js/changeBg.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="/js/navbar.js"></script>
<script src="/js/modalContent.js"></script>
</head>
<body>
<div class="pageContainer">
<!-- Page Container -->
<!--- Beginning of navbar --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Bulchives</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">2022 Files</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="/2022/season-summary">Season Summary</a></li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Agaton (03W Megi)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Agaton/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Basyang (02W Malakas)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Basyang/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Basyang/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Basyang/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Caloy (04W Chaba)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Caloy/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Caloy/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Caloy/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Domeng (05W Aere)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Domeng/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Domeng/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Domeng/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Ester (07W Trases)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Agaton/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/TCWS">TCWS Maps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End of navbar -->
<div class="content-wrapper">
<div class="file-path">
<span>2022 > Agaton > TCB</span>
</div>
<hr class="content-seperator">
<div class="files">
<ul class="files-container">
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-1-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 01</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-1-modal" tabindex="-1" aria-labelledby="agaton-tcb-1-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-1-modal">Agaton TCB No. 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN1">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from DOST-PAGASA</p>
</div>
</div>
</div>
</div>
</li>
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-2-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 02</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-2-modal" tabindex="-1" aria-labelledby="agaton-tcb-2-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-2-modal">Agaton TCB No. 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN2">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from DOST-PAGASA</p>
</div>
</div>
</div>
</div>
</li>
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-3-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 03</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-3-modal" tabindex="-1" aria-labelledby="agaton-tcb-3-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-3-modal">Agaton TCB No. 3</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN3">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from DOST-PAGASA</p>
</div>
</div>
</div>
</div>
</li>
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-4-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 04</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-4-modal" tabindex="-1" aria-labelledby="agaton-tcb-4-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-4-modal">Agaton TCB No. 4</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN4">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from DOST-PAGASA</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<hr class="content-seperator">
<div class="footer">
<footer>
<div class="footer-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
</div>
<span class="footer-text">© 2022 Bulchives<br>Data files displayed in this site are products of DOST-PAGASA</span>
</footer>
</div>
</div>
</body>
</html>
jQuery:
$(document).ready(function() {
// FETCHING DATA FROM JSON FILE
$.getJSON('https://bulchives.astrookai.repl.co/modal-data/agaton.json',
function(data) {
var info = '';
// ITERATING THROUGH OBJECTS
$.each(data, function(key, value) {
var element = '#' + key;
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
info += '<tr>';
info += '<td>Filename</td>';
info += '<td>' + value.Filename + '</td>';
info += '</tr>';
info += '<tr>';
info += '<td>File Type</td>';
info += '<td>' + value.Filetype + '</td>';
info += '</tr>';
info += '<tr>';
info += '<td>File Size</td>';
info += '<td>' + value.Filesize + '</td>';
info += '</tr>';
info += '<tr>';
info += '<td>Release Date</td>';
info += '<td>' + value.Release_Date + '</td>';
info += '</tr>';
info += '<tr>';
info += '<td colspan=2><a href="' + value.Download_URL + '" download>Download File' + '</td>';
info += '</tr>';
$(element).append(info);
console.log(element);
});
});
});
Question Rewritten

I hope it works (with your json data you provide):
Jquery
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
$('body').empty()
for (const [id, obj] of Object.entries(data)) {
var table = $('<table>').attr('id', `${id}`)
$('body').append(table)
for (const [key, value] of Object.entries(obj)) {
$(table).append(
$('<tr>')
.append($('<td>').append(`${key}`))
.append($('<td>').append(`${value}`))
)
}
}

With jQuery
Will loop over data object and render DOM into #data-tables div.
const data = {
"AFN1":{
"Filename":"Agaton_TCB_1",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-08-2022 21:34 UTC",
"Filesize":"524kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_1.pdf"
},
"AFN2":{
"Filename":"Agaton_TCB_2",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-09-2022 01:09 UTC",
"Filesize":"244kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_2.pdf"
}
}
for(const fragment in data) {
const table = $(`<table id="${fragment}"></table>`);
for(const key in data[fragment]) {
const row = $(`<tr>
<td>${key}</td>
<td>${data[fragment][key]}</td>
</tr>`);
table.append(row);
}
$('#data-tables').append(table);
}
table {
border: 1px solid black;
display: inline-block;
margin: 4px;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data-tables"></div>

angularjs angular.min.js:85 Error: [$sce:insecurl]

i have poor knowledge in angular pls some one help me in localhost its working fine..
and it was works well while php5 after upgrade php7 i got this error,
angular.min.js:85 Error: [$sce:insecurl] http://errors.angularjs.org/1.2.13/$sce/insecurl?
p0=students%2Flistdata.php%3F
at angular.min.js:6
at getTrusted (angular.min.js:110)
at Object.e. [as getTrustedResourceUrl] (angular.min.js:112)
at angular-route.min.js:10
at B (angular.min.js:94)
at B (angular.min.js:94)
at angular.min.js:95
at h.$eval (angular.min.js:103)
at h.$digest (angular.min.js:101)
at h.$apply (angular.min.js:104)
list page
<?php
global $title,$titleS,$CURRENTUNIT,$addNewFn;
$path = "../";
include_once($path."includes/class.inc.php");
$title = "Students";
$titleS = "Student Details";
admin_userChk();
error_reporting(0);
if(!user_hasRights('menuStudentList')){ echo "<h1>403: Access Forbidden</h1>";exit; }
?>
<div class="row">
<div class="col-md-12">
<section class="panel" ng-controller="listController" id="listController" ng-init="filter.SearchQry='';filterListData()">
<header class="panel-heading" >
List of <?=$title?>
<div class="pull-right">
<?php //if(user_hasRights('addNewProductinfo')){ ?>
<a ng-click="addNewStudInfo()" class="btn btn-mini btn-success"><i class="fa fa-graduation-cap"></i> Add New <?=$titleS?></a>
<?php //} ?>
</div>
</header>
<div class="row">
<div class="col-md-12">
<form class="form-inline" ng-submit="filterListData()" >
<div class="form-group">
<div class="col-md-12">
<input type="text" name="SearchQry" class="form-control" placeholder="Search" value="<?=$_REQUEST['SearchQry']?>" ng-model="filter.SearchQry">
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<button class="btn btn-small btn-info" type="submit">SUBMIT</button>
</div>
</div>
<script type="text/javascript">
//$('#searchForm [name="InternalCompId"]').val('<?=$_REQUEST['InternalCompId']?>')
</script>
</form>
</div>
</div>
<div class="pull-out m-t-small">
<table class="table table-bordered table-striped b-t text-small">
<thead>
<tr align="center">
<th >Sl.No</th>
<th >Student Name</th>
<!-- <th >Grade</th> -->
<th >Parent Name</th>
<!-- <th >Parent Occupation</th> -->
<th >Contact No</th>
<th >Email</th>
<th >Current Level</th>
<th >D.O.B</th>
<th >Joined On</th>
<?php if(user_hasRights('editStudInfo')){ ?>
<th >Edit</th>
<?php } ?>
<?php if(user_hasRights('deleteStudInfo')){ ?>
<th >Delete</th>
<?php } ?>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td>{{data.slno}}</td>
<td>{{data.StudentName}}</td>
<!-- <td>{{data.Grade}}</td> -->
<td>{{data.ParentName}}</td>
<!-- <td>{{data.ParentOccupation}}</td> -->
<td>{{data.ContactNo}}</td>
<td>{{data.Email}}</td>
<td>{{data.CurrentLevel}}</td>
<td>{{data.Dob}}</td>
<td>{{data.Doj}}</td>
<?php if(user_hasRights('editStudInfo')){ ?>
<td>
<i class="fa fa-edit"></i>
<input type="hidden" id="editId{{$index}}" value="{{data.StudId}}" />
</td>
<?php } ?>
<?php if(user_hasRights('deleteStudInfo')){ ?>
<td><i class="fa fa-trash-o"></i></td>
<?php } ?>
</tr>
</tbody>
</table>
<div class="clearfix"></div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-lg-12 text-center">
<ul class="pagination pagination-small m-t-none m-b-none">
<li>First</li>
<li>Prev</li>
<li class="active">
<input type="text" ng-model="filter.page" id="CurrentPage" class="form-control pull-left" style="width:50px" my-enter="filterListData('Current')">
of {{filter.totalPages}}
</li>
<li>Next</li>
<li>Last</li>
</ul>
</div>
</div>
</footer>
</section>
</div>
</div>
<script>
var pageConfig = {pageTitleS: "<?=$titleS?>", bcl0: "Home", bcl1: "<?=$title?>", bcl2: "<?=$titleS?>"};
updatePageInfo(pageConfig);
function listController($scope, $http) {
$scope.filterListData = function(gotoPage) {
$http.post(
'students/forms.php?render=json&gotoPage='+gotoPage,
$.param($scope.filter), {headers:{'Content-Type': 'application/x-www-form-urlencoded'} }
)
.then(function(response){
$scope.dataList = response.data.list;
$scope.filter.page = response.data.filter.page;
$scope.filter.totalPages= response.data.filter.totalPages;
});
};
<?php if(user_hasRights('addNewStudInfo')){ ?>
$scope.addNewStudInfo = function() {
$http.get('students/forms.php?FormId=addNewStudInfo')
.then(function(response){ $('#myModal').html(response.data).modal(); });
};
<?php } ?>
<?php if(user_hasRights('editStudInfo')){ ?>
$scope.editStudInfo = function(index) {
var editId = $("#editId"+index).val();
$http.get('students/forms.php?FormId=editStudInfo&editId='+editId)
.then(function(response){ $('#myModal').html(response.data).modal(); });
};
<?php } ?>
<?php if(user_hasRights('deleteStudInfo')){ ?>
$scope.deleteStudInfo = function(index) {
$.confirm({
message: '<b>Are you sure that you want to delete this?</b>',
labelOk:"Delete",
onOk: function() {
//action
var editId = $("#editId"+index).val();
$http.get('students/forms.php?action=deleteStudInfo&delId='+editId)
.then(function(response){$scope.filterListData('Current'); });
}
});
};
<?php } ?>
}
</script> ```
**index page**
```<?php
$appPath = "app/#/";
session_start();
$path = "../";
include_once($path."includes/class.inc.php");
admin_userChk();
?>
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8">
<base href="http://<?=$_SERVER['HTTP_HOST']?>/admin/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<link rel="shortcut icon" href="assets/themes/start/images/favicon_1.ico">
<title>WebPanel by Sura</title>
<link href="assets/themes/start/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/core.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/components.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/pages.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/menu.css" rel="stylesheet" type="text/css">
<link href="assets/themes/start/css/responsive.css" rel="stylesheet" type="text/css">
<script src="assets/themes/start/js/modernizr.min.js"></script>
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="../../https#oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="angular/page.css" media="all" />
<link rel="stylesheet" type="text/css" href="angular/animate.min.css" media="all" />
<!-- Plugins -->
<link href="assets/plugins/select2/select2.css" rel="stylesheet" />
<link href="assets/plugins/select2/select2-bootstrap.css" rel="stylesheet" />
<link href="assets/plugins/selectize/selectize.css" rel="stylesheet" />
<link href="assets/plugins/selectize/selectize.bootstrap3.css" rel="stylesheet" />
<link href="assets/plugins/jquery-ui/theme/jquery-ui.custom.min.css" rel="stylesheet" />
<link href="assets/plugins/summernote/summernote.css" rel="stylesheet" />
<link href='assets/plugins/loading-bar/loading-bar.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="assets/plugins/tagsinput/jquery.tagsinput.min.css" media="all" />
<!-- Plugins -->
</head>
<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper">
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<div class="text-center"><i class="fa fa-edit"></i> <span>Web Panel</span></div>
</div>
<!-- Button mobile view to collapse sidebar menu -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<div class="pull-left"><button class="button-menu-mobile open-left"><i class="fa fa-bars"></i></button> <span class="clearfix"></span></div>
<!-- <form class="navbar-form pull-left" role="search">
<div class="form-group"><input type="text" class="form-control search-bar" placeholder="Type here for search..."></div>
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
</form> -->
<ul class="nav navbar-nav navbar-right pull-right">
<!--<li class="dropdown hidden-xs">
<i class="md md-notifications"></i> <span class="badge badge-xs badge-danger">3</span>
<ul class="dropdown-menu dropdown-menu-lg">
<li class="text-center notifi-title">Notification</li>
<li class="list-group">
<!-- list item-- >
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="pull-left"><em class="fa fa-user-plus fa-2x text-info"></em></div>
<div class="media-body clearfix">
<div class="media-heading">New user registered</div>
<!-- <p class="m-0"><small>You have 10 unread messages</small></p> -- >
</div>
</div>
</a>
<!-- list item-- >
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="pull-left"><em class="fa fa-diamond fa-2x text-primary"></em></div>
<div class="media-body clearfix">
<div class="media-heading">New Order Placed</div>
<!-- <p class="m-0"><small>There are new settings available</small></p> -- >
</div>
</div>
</a>
<!-- list item-- >
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="pull-left"><em class="fa fa-bell-o fa-2x text-danger"></em></div>
<div class="media-body clearfix">
<div class="media-heading">New Order Placed</div>
<p class="m-0"><small> <span class="text-primary">2</span> New Orders Placed</small></p>
</div>
</div>
</a>
<!-- last list item -- > <small>See all notifications</small>
</li>
</ul>
</li>-->
<li class="dropdown">
Welcome <?=$_SESSION['adminName']?> <img src="files/<?=$_SESSION['adminPic']?>" alt="user-img" class="img-circle">
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> My Profile</li>
<li><i class="fa fa-cog"></i> Change Password</li>
<li><i class="fa fa-power-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Top Bar End --><!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div class="user-details">
<div class="pull-left"><img src="files/<?=$_SESSION['adminPic']?>" alt="" class="thumb-md img-circle"></div>
<div class="user-info">
<div class="dropdown">
<?=$_SESSION['adminName']?> <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> My Profile<div class="ripple-wrapper"></div></li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-power-off"></i> Logout</li>
</ul>
</div>
<p class="text-muted m-0">IP: <?=$_SERVER['REMOTE_ADDR']?></p>
</div>
</div>
<!--- Divider -->
<div id="sidebar-menu">
<ul>
<li><i class="md md-home"></i><span>Home</span></li>
<li><i class="fa fa-shopping-cart"></i><span>Orders</span></li>
<li><i class="fa fa-users"></i><span>Buyers</span></li>
<li><i class="fa fa-book"></i><span>Book Details</span></li>
<li><i class="fa fa-cog"></i><span>Discount Terms</span></li>
<li><i class="fa fa-gift"></i><span>Coupon Codes</span></li>
<li><i class="fa fa-cogs"></i><span>Shop Settings</span></li>
<li><i class="fa fa-cogs"></i><span>Ship Settings</span></li>
<li class="divider"><br /><br /></li>
<li><i class="fa fa-file-pdf-o"></i><span>Levels</span></li>
<li><i class="fa fa-graduation-cap"></i><span>Students (Users)</span></li>
<li><i class="fa fa-file-text"></i><span>Website contents</span></li>
<!-- <li><i class="fa fa-newspaper-o"></i><span>News & Events</span></li> -->
<li><i class="fa fa-picture-o"></i><span>Photos</span></li>
<li><i class="fa fa-youtube-play"></i><span>Videos</span></li>
<li><i class="fa fa-quote-right"></i><span>Testimonials</span></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Left Sidebar End --><!-- ============================================================== --><!-- Start right Content here --><!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container">
<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<h4 class="pull-left page-title pageTitleS"></h4>
<ol class="breadcrumb pull-right">
<li>Home</li>
<li></li>
<li class="active l2"></li>
</ol>
</div>
</div>
<div>
<div class="page {{ pageClass }}" ng-view></div>
</div>
</div>
<!-- container -->
</div>
<!-- content -->
<footer class="footer text-right">2015 © Sura Technologies</footer>
</div>
<!-- ============================================================== --><!-- End Right content here -->
</div>
<!-- END wrapper -->
<script>var resizefunc = [];</script>
<!-- Main -->
<script src="assets/themes/start/js/jquery.min.js"></script>
<script src="assets/themes/start/js/bootstrap.min.js"></script>
<script src="assets/themes/start/js/detect.js"></script>
<script src="assets/themes/start/js/fastclick.js"></script>
<script src="assets/themes/start/js/jquery.slimscroll.js"></script>
<script src="assets/themes/start/js/wow.min.js"></script>
<script src="assets/themes/start/js/jquery.nicescroll.js"></script>
<script src="assets/themes/start/js/jquery.scrollTo.min.js"></script>
<script src="assets/themes/start/js/jquery.app.js"></script>
<!-- Plugins -->
<script src="assets/plugins/select2/select2.js"></script>
<script src="assets/plugins/selectize/selectize.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/plugins/summernote/summernote.js"></script>
<script src="assets/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<!-- Plugins -->
<script src="assets/plugins/jquery.form.min.js"></script>
<script src="assets/plugins/validate.js"></script>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/ui-bootstrap.min.js"></script>
<script src="angular/main.js"></script>
<script src="assets/plugins/loading-bar/loading-bar.js"></script>
<script type="text/javascript">
function getCustSummary(PartyId){
$('.modal-body').html('<img src="images/preloader.gif" alt="" />');
$.ajax({
url: "customers/ajaxdata.php?action=getCustSummary&InternalCompType=&PartyId="+PartyId,
success: function (data) { $('#myModal').html(data).modal(); }
});
}
$(document).ready(function(){
});
</script>
<div class="modal modal-light fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div 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 class="modal modal-light fade" id="MainModal"></div>
</body>
</html> ```
angular confirm.js
/*
* angular-confirm
* http://schlogen.github.io/angular-confirm/
* Version: 1.1.0 - 2015-14-07
* License: Apache
*/
angular.module('angular-confirm', ['ui.bootstrap'])
.controller('ConfirmModalController', ['$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
$scope.data = angular.copy(data);
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}])
.value('$confirmModalDefaults', {
template: '<div class="modal-header"><h3 class="modal-title">{{data.title}}</h3></div>' +
'<div class="modal-body">{{data.text}}</div>' +
'<div class="modal-footer">' +
'<button class="btn btn-primary" ng-click="ok()">{{data.ok}}</button>' +
'<button class="btn btn-default" ng-click="cancel()">{{data.cancel}}</button>' +
'</div>',
controller: 'ConfirmModalController',
defaultLabels: {
title: 'Confirm',
ok: 'OK',
cancel: 'Cancel'
}
})
.factory('$confirm', ['$modal', '$confirmModalDefaults', function($modal, $confirmModalDefaults) {
return function(data, settings) {
settings = angular.extend($confirmModalDefaults, (settings || {}));
data = angular.extend({}, settings.defaultLabels, data || {});
if ('templateUrl' in settings && 'template' in settings) {
delete settings.template;
}
settings.resolve = {
data: function() {
return data;
}
};
return $modal.open(settings).result;
};
}])
.directive('confirm', ['$confirm', function($confirm) {
return {
priority: 1,
restrict: 'A',
scope: {
confirmIf: "=",
ngClick: '&',
confirm: '#',
confirmSettings: "=",
confirmTitle: '#',
confirmOk: '#',
confirmCancel: '#'
},
link: function(scope, element, attrs) {
element.unbind("click").bind("click", function($event) {
$event.preventDefault();
if (angular.isUndefined(scope.confirmIf) || scope.confirmIf) {
var data = { text: scope.confirm };
if (scope.confirmTitle) {
data.title = scope.confirmTitle;
}
if (scope.confirmOk) {
data.ok = scope.confirmOk;
}
if (scope.confirmCancel) {
data.cancel = scope.confirmCancel;
}
$confirm(data, scope.confirmSettings || {}).then(scope.ngClick);
} else {
scope.$apply(scope.ngClick);
}
});
}
}
}]);
main.js
var mainApp = angular.module("mainApp", ['ngRoute', 'ngSanitize', 'ngAnimate', 'ui.bootstrap', 'angular-loading-bar']);
mainApp.config(function($routeProvider) {
$routeProvider.when('/:name*', {
templateUrl: function(urlattr) {
var queryString = "";
angular.forEach(urlattr, function(key, value) {
if (value != "name") {
queryString += "&" + value + "=" + urlattr[value];
}
});
//alert(queryString);
return '' + urlattr.name + '?' + queryString;
},
controller: 'mainController'
})
.otherwise({ redirectTo: '' });
});
app.filter('trusted', ['$sce', function($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
}]);
mainApp.controller('mainController', ['$scope', function($scope) {
$scope.sayHello = function(title) {
alert(title);
$scope.greeting = $scope.username;
};
$scope.greeting = $scope.username;
}]);
angular.module('mainApp')
.filter('to_trusted', ['$sce', function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
mainApp.directive('myEnter', function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
scope.$eval(attrs.myEnter);
});
event.preventDefault();
}
});
};
});
mainApp.directive('prettyp', function() {
return function(scope, element, attrs) {
$("[rel^='prettyPhoto']").prettyPhoto({ deeplinking: false, social_tools: false });
}
})
function updatePageInfo(pageConfig) {
$("title").html(pageConfig.pageTitleS);
$(".pageTitleS").html(pageConfig.pageTitleS);
$(".breadcrumb .l0").html(pageConfig.bcl0);
$(".breadcrumb .l1").html(pageConfig.bcl1);
$(".breadcrumb .l2").html(pageConfig.bcl2);
$(".date").datepicker();
}

I changed http to https
Previous:
base href="http://<?=$_SERVER['HTTP_HOST']?>/admin/"
Fixed:
base href="https://<?=$_SERVER['HTTP_HOST']?>/admin/"

boostrap 3 + datatables buttons: misalignment

I'm experiencing misalignment when using boostrap 3 and datatables buttons (https://datatables.net/extensions/buttons/). How to align them propery?
everything works fine when on div.dt-buttons margin is set margin-top:2px;, don't know why, but it feels wrong is there any "standard way"?
$(document).ready(function(myApp) {
myApp.myDataTable = $('.my-table').DataTable({
fixedHeader: true,
paging: true,
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
extend: 'colvis',
tag: 'button',
className: 'btn btn-default'
}]
}
});
}(window.myApp = window.myApp || {}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" />
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 12 of 24 entries</div>
</div>
<div class="col-sm-3">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
Previous
</li>
<li class="paginate_button active">
1
</li>
<li class="paginate_button ">
2
</li>
<li class="paginate_button next" id="DataTables_Table_0_next">
Next
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="dt-buttons">
<button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false">
<span>Column visibility</span>
<span class="dt-down-arrow">▼</span>
</button>
</div>
</div>
</div>

There are a few ways you could go here. I'd probably remove the margin from the pagination list as a reset. You can then add spacing back in using your grid instead.
$(document).ready(function(myApp) {
myApp.myDataTable = $('.my-table').DataTable({
fixedHeader: true,
paging: true,
buttons: {
dom: {
button: {
className: ''
}
},
buttons: [{
extend: 'colvis',
tag: 'button',
className: 'btn btn-default'
}]
}
});
}(window.myApp = window.myApp || {}));
ul.pagination {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap.min.css" />
<div class="row">
<div class="col-sm-6">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 12 of 24 entries</div>
</div>
<div class="col-sm-3">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
Previous
</li>
<li class="paginate_button active">
1
</li>
<li class="paginate_button ">
2
</li>
<li class="paginate_button next" id="DataTables_Table_0_next">
Next
</li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="dt-buttons">
<button tabindex="0" aria-controls="DataTables_Table_0" type="button" class="buttons-collection buttons-colvis btn btn-default" aria-haspopup="true" aria-expanded="false">
<span>Column visibility</span>
<span class="dt-down-arrow">▼</span>
</button>
</div>
</div>
</div>

How to create Dynamic Header and footer for web pages in JS?

I am developing a website and there are many pages in the website, so I want the header and footer files dynamically calling to all the web pages.
I have written a script but it is not working. Please help.
Here is the script:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
**<script src="jquery-3.3.1.min.js"></script>**
</head>
**<script>
$(function(){
$("#header").load("header/footer/header.html");
$("#header").load("header/footer/footer.html");
});**
</script>
<body>
**<div id="header"></div>**
<center><h1 style="color: black; padding: 10%;">Starter Template</h1></center>
**<div id="footer"></div>**
</body>
</html>
I have created a folder named HEADERFOOTER and in this folder, I have created 2 HTML files named header.html and footer.html
HEADER.HTML File
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!--nav bar-->
<nav class="navbar navbar-expand-lg fixed-top header navbar-light" style="background-color: #fff;">
<a class="navbar-brand" href="index.html"><img src="img/Capture.JPG" alt="BOOKSthread" title="Books Thread" class="img-responsive" style="height: 70px; width: 210px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active nav-heading">
<a class="nav-link nav-head-color" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">How It Works</a>
</li>
<li class="nav-item dropdown nav-heading">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: black;">
Category<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
<li><a class="" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">New Arrivals</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">Subscription Plan</a>
</li>
<li class="nav-item nav-heading">
<a class="nav-link" href="#" style="color: black;">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="search" type="search" placeholder="Search" aria-label="Search" style="width:300px;">
<button class="btn btn-outline-success my-2 my-xl-0" type="submit">Search</button>
</form>
<span> </span>
<button type="button" class="btn btn-primary btn-sm">Login</button>
<span> </span>
<button type="button" class="btn btn-warning btn-sm">Signup</button>
</div>
</nav>
</body>
</html>
FOOTER.HTML File
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>BooksThread</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<!--book hover effect files-->
<link rel="stylesheet" type="text/css" href="css/book-hover/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book-hover/component.css" />
<script src="js/book-hover/modernizr.custom.js"></script>
<!--*------------font awesome---------------*-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--*******************google fonts**************************-->
<link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<!--***************************************************************-->
<!--[if IE]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--mycode-->
<!---->
</head>
<body>
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<i class="fa fa-facebook"></i>
<!-- Google +
<i class="fa fa-google"></i>
<!--youtube
<i class="fa fa-youtube"></i>
<!--Instagram
<i class="fa fa-instagram"></i>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<i class="fa fa-facebook"></i>
</p>
<p class="social-networks">
<i class="fa fa-google"></i>
</p>
<p class="social-networks">
<!--youtube -->
<i class="fa fa-youtube"></i>
</p>
<p class="social-networks">
<!--Instagram-->
<i class="fa fa-instagram"></i>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:customercare#booksthread.com" style="text-decoration: none;">customercare#booksthread.com</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> info#example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!---->
</body>
</html>
Please help to create the dynamic header and footer in across all the pages.
Thanks!!

Why do not you use ajax to load the content?
Insert this script inside the head tags and the file should load.
<script>
$(function(){
$.ajax({
type: "GET",
url: "header/footer/header.html",
dataType: "html",
success: function(answer) {
$("body").append(answer);
},
error: function(){
alert("failed call!!!");
}
});
return false;
});
</script>
I also saw that the files you need to include have html tags that have already been placed on the main page. You do not need to re-enter those tags but only the affected content, eg for the footer:
<!-- Footer -->
<footer class="page-footer font-small blue-grey lighten-5 mt-4 footer">
<!-- <div style="background-color: #fbc73b;">
<div class="container">
<!-- Grid row
<div class="row py-4 d-flex align-items-center">
<!-- Grid column
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0">Get connected with us on social networks!
</h6>
</div>
<!-- social networks list
<div class="col-md-6 col-lg-7 text-center text-lg-right social-networks">
<!-- Facebook
<i class="fa fa-facebook"></i>
<!-- Google +
<i class="fa fa-google"></i>
<!--youtube
<i class="fa fa-youtube"></i>
<!--Instagram
<i class="fa fa-instagram"></i>
</div>
<!-- Grid column
</div>
<!-- Grid row-
</div>
</div>-->
<!-- Footer Links -->
<div class="container text-center text-md-left mt-5">
<!-- Grid row -->
<div class="row mt-3 dark-grey-text">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mb-4">
<!-- Content -->
<div class="white">
<h6 class="text-uppercase font-weight-bold">booksthread</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>Choose the books you want to read, from the online catalogue and we deliver the physical copies of the books to your homes</p>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">who we are</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">About Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Contact Us</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Privacy Policy</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Registeration</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">Social Network</h6>
<p class="social-networks">
<i class="fa fa-facebook"></i>
</p>
<p class="social-networks">
<i class="fa fa-google"></i>
</p>
<p class="social-networks">
<!--youtube -->
<i class="fa fa-youtube"></i>
</p>
<p class="social-networks">
<!--Instagram-->
<i class="fa fa-instagram"></i>
</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase font-weight-bold white" style="color: white;">get in touch</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">Lajpat Nagar, India</a>
</p>
<p>
<a class="dark-grey-text none" href="mailto:customercare#booksthread.com" style="text-decoration: none;">customercare#booksthread.com</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">011-41416816</a>
</p>
<p>
<a class="dark-grey-text none" href="#!" style="text-decoration: none;">FAQ</a>
</p>
</div>
<!-- Grid column -->
<!--<div class="col-md-4 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<hr class="teal accent-3 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
<p>
<i class="fa fa-home mr-3"></i> New York, NY 10012, US</p>
<p>
<i class="fa fa-envelope mr-3"></i> info#example.com</p>
<p>
<i class="fa fa-phone mr-3"></i> + 01 234 567 88</p>
<p>
<i class="fa fa-print mr-3"></i> + 01 234 567 89</p>
</div>-->
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center text-black-50 py-3 white" style="color:white; background-color: #212121;">
<center><a class="white" href="https://booksthread.com" style="text-decoration: none;">© 2018 Copyright: BOOKSthread</a>
</center>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
The same thing must be done with the header but first insert the latter because the function append() insert the content at the end of the selected element and how it is right that the footer is put underneath.

You can follow the below steps:
Step 1: Create footer.js
Create a file footer.js with html contents like below:
document.writeln('<p> Copyright 2020, G Inc. All Rights Reserved </p>')
If in-case you have single quotes with-in your document.writeln, replace it backslash. Eg.: \'text \'
Step 2: Include this in your HTML file.
<script language="javascript" type="text/javascript" src="footer.js"></script>
You can do the same for the header.

<script type="text/javascript"> failed to load Resourse for internal script

Is the script tag with no src attribute is wrong?
I have written this script tag
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
I am getting this error on console Failed to load resource: the server responded with a status of 404 (Not Found). I am unable to understand what is the problem. I have included the jquery core library on header of page. Also there are some other javascripts codes that are included bfore this code but they did not throws any error. I have also attached a screenshot of the console.
Update 1
I tried after removing the type attribute. nothing happens :( .
I have included the jquery library version 1.9.1 in header.
Update 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Bharat">
<title>::Eduesy:: </title>
<meta property="og:title" content="Bharat">
<meta property="og:description" content="Bharat">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/web.css?1.0" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/app.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/tooltip.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/custom.css" />
<link type="text/css" rel="stylesheet" href="http://eduesy.fsas.co.in/css/student/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Alegreya:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/jquery-1.9.1.min.js"></script>
<script src="https://cdn.ravenjs.com/3.6.1/raven.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/vendor.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/libs.all.min.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/app.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tooltip.js"></script>
<script type="text/javascript" src="http://eduesy.fsas.co.in/js/student/tpr.web.min.js"></script>
<script src="http://eduesy.fsas.co.in/js/student/chartist.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".header").addClass('header-fix');
}else{
jQuery(".header").removeClass('header-fix');
}
});
jQuery(window).scroll(function(e) {
if(jQuery(document).scrollTop()>0){
jQuery(".row-blue").addClass('header-fix');
}else{
jQuery(".row-blue").removeClass('header-fix');
}
});
});
</script>
</head>
<body>
<div class="header">
<header>
<div class="cf">
<div class="pTopHeader_dropdown pTopHeader_userDropdown non-selectable fr js-user-dropdown">
<a class="pTopHeader_dropdown_trigger pTopHeader_userDropdown_trigger js-trigger">
<span class="profilename">Welcome Chandu</span> <img class="pTopHeader_userDropdown_thumb " alt="" src="http://eduesy.fsas.co.in/uploadedFiles/student/IMG_20150412_182136 (2) - Copy.jpg"/>
</a>
<ul class="pTopHeader_dropdown_menu pTopHeader_dropdown_menu-right pTopHeader_userDropdown_menu js-dropdown">
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Profile
</li>
<li>
<span class="fa fa-tachometer pTopHeader_dropdown_menu_icon"></span>Switch Course
</li>
<li>
<span class="fa fa-power-off pTopHeader_dropdown_menu_icon"></span>Logout
</li>
</ul>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide">
<a role="button" tabindex="0" class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Contact Us</a>
<div class="pTopHeader_contactUpWrapper_tooltip">
<div class="contactTooltip">
<div class="cf">
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-feedback"></div>
<div class="contactTooltip_title">Share Feedback</div>
<div class="contactTooltip_subtitle">Share your feedback for us. We are continuously working to improve your experience.</div>
<div class="contactTooltip_callUsNo">abc#xyz.com</div>
</div>
<div class="contactTooltip_item">
<div class="contactTooltip_itemIcon contactTooltip_itemIcon-callus"></div>
<div class="contactTooltip_title">Call us</div>
<div class="contactTooltip_subtitle">We are happy to hear from you. We are available from 9am to 6pm on all days.</div>
<div class="contactTooltip_callUsNo">+91 - 1800 123 456</div>
</div>
</div>
<div class="contactTooltip_footer">
<span class="contactTooltip_footer_mapIcon fa fa-map-marker" aria-hidden="true"></span>
<div class="contactTooltip_footer_content">
<div class="contactTooltip_footer_title">Eduesy Online Education </div>
<div class="contactTooltip_footer_text">Mumbai - 400076, India</div>
</div>
</div>
</div>
</div>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide notification">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white"><i class="fa fa-bell" aria-hidden="true"></i><span>0</span></a>
</div>
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide btn-buy">
<a class="pTopHeader_btn pTopHeader_appBtn button button-small button-white">Buy</a>
</div>
</div>
</header>
<div class="logo">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="mainSidebar_logoBlock_logo -ajaxify" title="EduEsy" style="width: 176px !important">
<div class="mainSidebar_logoBlock_logo_img" style="background-image: url(http://eduesy.fsas.co.in/images/logo.png)"></div>
</a>
</div>
<div class="mobileMenu">
<div class="mobileMenu_fallbackHeader"></div>
<div class="mobileMenu_hamburger js-hamburger-menu">
<div class="mobileMenu_hamburger_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="row-blue">
<div class="pull-left">
Admission Taken Date: 29/05/2017
</div>
<div class="pull-right">
Student ID: EDUESY116 <span>|</span> Package Valid till: 25/12/2017
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.class_slider').click(function(){
jQuery('[name=product_id]').val(jQuery(this).data('product_id'));
jQuery('[name=product_type]').val(jQuery(this).data('product_type'));
jQuery(this).parents('form').submit();
});
});
</script>
<div class="popupbox" id="popuprel_course">
<div id="intabdiv">
<div id="test_tool_modals_wrapper">
<div class="md mdTestPause js-test-pause-modal is-visible" style="overflow-y: auto;">
<div class="close">X</div>
<form action="" method="post">
<div class="obrdV2_container js-modules-container pb-10 ">
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module profiletype" data-module="profiletype">
<div class="p-20 clickable js-toggle-module">
<div class="obrdV2_module_image obrdV2_module_image-klass fl"></div>
<div class="obrdV2_module_heading js-module-heading">
<div class="title">Choose one of the following</div>
<div class="selectedValue js-selected-value"></div>
</div>
<div class="arrowDown js-arrow-down class" style="display: none;"></div>
<div class="clr"></div>
</div>
<div class="obrdV2_module_body js-module-body visible ">
<div class="col-md-6 col-sm-12">
<div class="item academic"><label><input type="radio" name="profileType" value="academic" id="academic" style="display: none;"> Academic</label></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="item professional"><label><input type="radio" name="profileType" value="professional" id="professional" style="display: none;">Professional Courses</label></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="obrdV2_module js-module-class js-module address hide" data-module="address"></div>
<div class="clr"></div>
<div class="submit-row hide">
<div class="obrdV2_module js-module-class js-module submit" data-module="submit">
<div class="obrdV2_module_body js-module-body visible">
<input type="submit" name="switchCourseSubmit" class="btn btn-default" value="Save and Continue">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>
<script>
$(document).ready(function() {
$('.switch_class').click(function() {
var popupid = $(this).attr('rel');
$('#' + popupid).fadeIn();
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
jQuery('body').on('click', '.popupbox .close', function() {
jQuery(this).parents('.popupbox').fadeOut();
jQuery('#fade').fadeOut();
return false;
});
jQuery('.profiletype .js-module-body .item').on('click', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="profileType"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'profiletype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level2').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.classtype', function(evt){
if (evt.target.tagName == 'INPUT'){
var profile = jQuery('[name="classtype"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'boardtype', profiletype: profile},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level3').remove();
jQuery('.address').before(html);
}
});
}
});
jQuery('.obrdV2_container').on('click', '.boardListing', function(evt){
if (evt.target.tagName == 'INPUT'){
var board = jQuery('[name="boardID"]:checked').val();
jQuery.ajax({
url : 'http://eduesy.fsas.co.in/ajax_complete_profile.php',
type : 'post',
data : {action: 'classList', classList: board},
beforeSend : function(){
/*do nothing*/
},
success : function(html){
jQuery('.level4').remove();
jQuery('.address').before(html);
}
});
jQuery(".address").addClass('hide');
jQuery('.submit-row').addClass('hide');
}
});
jQuery('.obrdV2_container').on('click', '.obrdV2_klass', function(evt){
if (evt.target.tagName == 'INPUT'){
jQuery(this).siblings( '.selected').removeClass('selected');
jQuery(this).addClass('selected');
jQuery('.address').removeClass('hide');
jQuery('.submit-row').removeClass('hide');
}
});
jQuery('.obrdV2_container .address').on('change', function(evt){
jQuery('.submit-row').removeClass('hide');
});
(function($){
$(window).on("load",function(){
var modal_ht = jQuery('#popuprel_course .popupbox').actual('height');
jQuery("#popuprel_course #intabdiv").height(modal_ht);
jQuery("#popuprel_course #intabdiv").mCustomScrollbar({
scrollButtons:{enable:true},
theme:"light-thick",
scrollbarPosition:"outside",
updateOnBrowserResize: true,
updateOnContentResize: true
});
});
})(jQuery);
});
</script>
<style type="text/css">
.popupbox .close {
position: absolute;
right: 10px;
top: 8px;
font-size: 20px;
font-weight: bold;
background: #fff;
color: #000;
z-index: 9999999999999999;
border-radius: 50%;
padding: 5px 10px;
cursor: pointer;
opacity: 1;
visibility: visible;
box-sizing: border-box;
}
</style>
<div class="pageContentContainer">
<div id="page_content_wrapper" class="js-page-content-wrapper">
<div class="pHeader js-page-content">
<div class="cf">
<div class="pTopHeader_contactUpWrapper_trigger ph-16 fr phn-hide paging">
<a href="http://eduesy.fsas.co.in/student" >Dashboard</a> » <a href="index.php" >Lecture</a>
» <a href="javascript:void(0);" >HTML JavaScript</a>
</div></div>
<div class="pHeader_content pt-25 pb-20 phn-pb-5 clearfix">
<div class="container">
<h1 class="h1 color-white normal">
Lectures
</h1>
</div>
</div>
<div class="pHeader_tabsWrapper js-page-tabs-wrapper">
<div class="container">
<nav role="navigation">
<ul class="pHeader_tabs">
<li class=""><a data-tab="challenges_home" href="index.php?subject=51" class="-ajaxify -strk" >HTML Basic</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=52" class="-ajaxify -strk" >HTML Styles</a></li> <li class="active"><a data-tab="challenges_home" href="index.php?subject=53" class="-ajaxify -strk" >HTML JavaScript</a></li> <li class=""><a data-tab="challenges_home" href="index.php?subject=54" class="-ajaxify -strk" >HTML And XHTML</a></li>
</ul>
</nav>
</div>
</div>
<div class="pHeader_tabsSpacing"></div>
</div>
<div class="container js-page-content">
<div class="coachmarks_icon coachmarks_icon_selectSubject hide js-coachmarks"></div>
</div>
<div class="container pv-30 cf">
<div class="pCol pCol-wide alpha js-pageLearn">
<aside class="pCol pCol-narrow omega phn-mt-40">
<div class="heading heading-bordered h3 bold">Chapters</div>
<div class="cf mt-30 mb-50">
<a href="topic.php?topic=26"><div class="chapterTile tile tile-shadowed select_subject cf js-chapter-tile mb-20 tab-mb-20 phn-mb-15" data-subject_id="19">
<div class="chapterTile_arrowContainer">
<h2 class="chapterTile_title ">HTML File Paths</h2>
<span class="tile_arrow fa fa-angle-right"></span>
</div></div></a>
</div>
</aside>
</div>
<div class="sidebar-common">
<h2>Our mission is to provide a world class education to anyone, anywhere.</h2>
<h3>You will receive inside.</h3>
<ul>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-video.png" /></label>Video Lecture</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-test-series.png" /></label>Test Series</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-study-material.png" /></label>Study Material</li>
<li><label><img src="http://eduesy.fsas.co.in/images/student/img-doubt-section.png" /></label>Doubt Section</li>
</ul>
</div>
<div class="clr"></div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.select_subject').click(function(){
jQuery('[name=subject_id]').val(jQuery(this).data('subject_id'));
jQuery(this).parents('form').submit();
});
});
</script>
</div>
<div class="container">
<footer class="footer mv-20">
<ul>
<li>© Eduesy</li>
<span class="footer_dot">•</span>
<li>About</li>
<span class="footer_dot">•</span>
<li>Upgrade</li>
<span class="footer_dot">•</span>
<li>Contact</li>
<span class="footer_dot">•</span>
<li>Terms</li>
<span class="footer_dot">•</span>
<li>Bytes</li>
<span class="footer_dot">•</span>
<li>Blog</li>
</ul>
<div class="clr"></div>
</footer>
</div>
</div>
<div class="mainSidebar js-main-sidebar">
<div class="mainSidebar_switcherBlock js-class-switcher">
<a class="mainSidebar_switcherBlock_switch js-selected-class"> HTML</a>
<div class="mainSidebar_switcherBlock_dropdown js-dropdown">
<form method="post" action="http://eduesy.fsas.co.in/student/lectures/index.php">
<label class="mainSidebar_switcherBlock_option class_slider js-switchOption selected" data-class-title="HTML " data-product_id="47" data-product_type="Course" selected>HTML<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label><label class="mainSidebar_switcherBlock_option class_slider js-switchOption " data-class-title="Advance PHP " data-product_id="61" data-product_type="Course" >Advance PHP<div class="mainSidebar_switcherBlock_option_tickMark fa fa-check"></div></label>
<input type="hidden" name="product_id" value="course" />
<input type="hidden" name="product_type" value="47" />
<input type="hidden" name="change_product_type" value="1" />
</form>
</div>
</div>
<nav role="navigation" class="mainSidebar_contentBlock mainSidebar_contentBlock-withSwitcher js-main-sidebar-content-block">
<div class="mainSidebar_sHeading">Study Modules</div>
<ul class="mainSidebar_sNav js-mainSidebar-study">
<li data-tab="learn" class="active open">
<a href="http://eduesy.fsas.co.in/student/lectures/index.php" class="-ajaxify q_tip_w" original-title="Lectures">
<div class="iconWrapper">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Lectures</div>
</a>
</li>
<li data-tab="practice" class="">
<a href="http://eduesy.fsas.co.in/student/practice/index.php" class="-ajaxify q_tip_w" original-title="Practice">
<div class="iconWrapper">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Practice</div>
</a>
</li>
<li data-tab="tests" class="">
<a href="http://eduesy.fsas.co.in/student/tests/index.php" class="js-lhs-ts-link q_tip_w -ajaxify -strk">
<div class="iconWrapper">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Tests</div>
</a>
</li>
<li data-tab="tests" class=""><div class="iconWrapper"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div><span class="arrow fa fa-angle-right"></span><div class="label">Exam</div></li>
<li data-tab="doubts" class="">
<a href="http://eduesy.fsas.co.in/student/doubt/index.php"
class="-strk -ajaxify q_tip_w js-startDoc">
<div class="iconWrapper">
<i class="fa fa-weixin" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Doubts</div>
</a>
</li>
<li data-tab="challenges" class="">
<a href="http://eduesy.fsas.co.in/student/challenges/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Challenges</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">My Profile</div>
<ul class="mainSidebar_sNav js-mainSidebar-compare">
<li data-tab="dashboard" class="">
<a href="http://eduesy.fsas.co.in/student/dashboard/index.php" class="-ajaxify q_tip_w" original-title="Dashboard">
<div class="iconWrapper">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Dashboard</div>
</a>
</li>
<li data-tab="my_bookmarks" class="">
<a href="http://eduesy.fsas.co.in/student/placement/index.php" class="-ajaxify -bookmarks q_tip_w">
<div class="iconWrapper">
<i class="fa fa-star-half-o" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Placement</div>
</a>
</li>
<li data-tab="achievements" class="">
<a href="http://eduesy.fsas.co.in/student/achievement/index.php" class="-ajaxify q_tip_w">
<div class="iconWrapper">
<i class="fa fa-trophy" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Achievements</div>
</a>
</li>
<li data-tab="leaderboard" class="">
<a href="http://eduesy.fsas.co.in/student/leaderboard/index.php" class="-ajaxify -strk q_tip_w">
<div class="iconWrapper">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</div>
<span class="arrow fa fa-angle-right"></span>
<div class="label">Leaderboard</div>
</a>
</li>
</ul>
<div class="mainSidebar_sHeading">Study Tools</div>
<footer class="mainSidebar_footer mv-20">
<ul class="cf">
<li>© Eduesy</li>
<span class="mainSidebar_footer_dot">•</span>
<li>About</li>
<span class="mainSidebar_footer_dot">•</span>
<li>
Discuss
</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Blog</li>
<span class="mainSidebar_footer_dot">•</span>
<li>Terms</li>
</ul>
</footer>
</nav>
</div>
</body>
</html>

ShowMsg('Access denied ! ! !'); Access denied ! ! !

Categories

Resources