My Success Message (Alert Message) doesn't vanish - javascript

My applications has different sides on which the user can add Hardware. If the user successfully add a item a Success Message is shown which vanish after a few seconds. Unfortunetly on one side it won't vanish. Does somebody know why?
On this side the message does vanish:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Greenify | Travel</title>
<!-- ############### -->
<!-- ## CSS Files ## -->
<!-- Bootstrap core CSS -->
<link th:href="#{css/bootstrap.css}" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<!-- Main CSS -->
<link rel="stylesheet" th:href="#{css/main.css}" href="../static/css/main.css">
<!-- Cards CSS -->
<link rel="stylesheet" th:href="#{css/cards.css}" href="../static/css/cards.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- JS-File with Dashboard-Charts -->
<script th:src="#{js/dimensions_it_travel_expenses.js}" src="../static/js/dimensions_it_travel_expenses.js"></script>
<!-- JavaScript to save data for charts in Model-->
<script>
oEmissions = [];
oEmissions.emissions_total = [[${emissions_total}]];
oEmissions.emissions_flights = [[${emission_value_flights}]];
oEmissions.emissions_train = [[${emission_value_trains}]];
oEmissions.emissions_car = [[${emission_value_cars}]];
oEmissions.emissions_hotel = [[${emission_value_hotels}]];
</script>
</head>
<body>
<div class="d-flex flex-column vh-100 overflow-hidden">
<!--Toolbar -->
<div th:insert="fragments/topbar :: topbar"></div>
<!-- Add Travel Expenses travel based - Modal -->
<div th:insert="fragments/ITTravelExpenses_Modal_Add :: ITTravelExpenses_Modal_Add"></div>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-auto mh-100 overflow-hidden flex-shrink-0">
<!-- Sidebar -->
<navbar th:include="fragments/sidebar :: sidebar(dashboardActive='', dimensionsActive='active', decarbonizeActive='')"></navbar>
</div>
<div class='col mh-100 overflow-auto pe-4'>
<!-- Row 1 (Headline) -->
<div class="row">
<!-- Headline Dimensions -->
<h1 class="display-6 text-center">IT - Travel Expenses</h1>
</div>
<!-- Test Yearly Emissions<span th:each="year : ${yearlyEmissions}" th:text="${year.getValue()} + ', '">, </span> -->
<!-- Success Message -->
<!-- Error Label -->
<div th:if="${error}" th:text="${error}" class="alert alert-danger alert-dismissible fade show text-center position-fixed top-0 end-0 p-3 " style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Success Label -->
<div th:if="${success}" th:text="${success}" class="alert alert-success alert-dismissible fade show text-center position-fixed top-0 end-0 p-3 " style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Accordion with tables -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<!-- Accordion-Item 1: Travel Expenses -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed p-4" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
<h5>Travel Expenses (<span th:text="${#numbers.formatDecimal(emissions_total, 0, 'POINT', 2, 'COMMA')}"></span> CO<sub>2</sub>e)</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- Button to add Travel Expenses via Modal -->
<button type="button" class="btn btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#ITTravelExpenses_Modal_Add" style="background-color: var(--own-green-2); float: right;">
<i class="bi bi-plus-lg" style="color: white;"></i>
</button>
<!-- Check if there are entries for trips. If there are no entries, a hint text will be displayed -->
<div th:if="__${trips.size()}__ == 0">
<p class="fs-6">Currently there are no entries for trips. You can add them via the add button!</p>
</div>
<!-- Check if there are entries for trips table -->
<div th:if="__${trips.size()}__ >= 1">
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Title</th>
<th scope="col">Startdate</th>
<th scope="col">Enddate</th>
<th scope="col">Amount of Persons</th>
<th scope="col">Overnight Stays</th>
<th scope="col">Travel Destination</th>
<th scope="col">Details</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="trip : ${trips}">
<td th:text="${trip.travelName}">Business Trip 1</td>
<td th:text="${#temporals.format(trip.startDate, 'dd.MM.yyyy')}">2000-08-2</td>
<td th:text="${#temporals.format(trip.endDate, 'dd.MM.yyyy')}">2000-08-22</td>
<td th:text="${trip.participants}">4</td>
<td th:text="${trip.stays} + ' days'">5</td>
<td th:text="${trip.destinationCountry}">Italy</td>
<td><i class="bi bi-box-arrow-up-right" role="button" data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Details' + ${trip.id }"></i></td>
<td>
<table class="d-flex justify-content-center">
<tr>
<!-- <td>-->
<!-- <div>-->
<!-- <i class="bi bi-pencil-fill text-primary me-3" style="cursor: pointer"-->
<!-- data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Update' + ${trip.id }"></i>-->
<!-- </div>-->
<!-- </td>-->
<td>
<div>
<i class="bi bi-trash-fill text-danger" role="button" type="submit" style="cursor: pointer"
data-bs-toggle="modal" th:attr="data-bs-target='#ITTravelExpenses_Modal_Delete' + ${trip.id }"></i>
</div>
</td>
</tr>
<!-- Delete Travel Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Delete :: ITTravelExpenses_Modal_Delete"></div>
<!-- Update Travel Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Update :: ITTravelExpenses_Modal_Update"></div>
</table>
<!-- Travel Detail Information Expense - Modal-->
<div th:insert="fragments/ITTravelExpenses_Modal_Details :: ITTravelExpenses_Modal_Details"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<!-- Accordion-Item 5: Hotel -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingFive">
<button class="accordion-button collapsed p-4" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive" aria-expanded="false" aria-controls="panelsStayOpen-collapseFive">
<h5>Hotel (<span th:text="${#numbers.formatDecimal(emission_value_hotels, 0, 'POINT', 2, 'COMMA')}"></span> CO<sub>2</sub>e)</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">
<div class="accordion-body">
<!-- Check if there are entries for hotelovernights. If there are no entries, a hint text will be displayed -->
<div th:if="__${hotelovernights.size()}__ == 0">
<p class="fs-6">Currently there are no entries for hotel overnight stays.</p>
</div>
<!-- Check if there are entries for hotelovernights table -->
<div th:if="__${hotelovernights.size()}__ >= 1">
<!-- Table with Hotel -->
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Name of Trip</th>
<th scope="col">Location</th>
<th scope="col">Amount overnight stays</th>
<th scope="col">Amount of Traveller</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="hotel : ${hotelovernights}">
<td th:text="${hotel.trip.travelName}">1</td>
<td th:text="${hotel.country}">Land</td>
<td th:text="${hotel.amountOfOvernightStays}">tage</td>
<td th:text="${hotel.trip.participants}">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Javascript Imports -->
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
While on this side the Message does not vanish:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="../../../../favicon.ico" />
<title>Greenify | IT Infrastructure</title>
<!-- Bootstrap core CSS -->
<link th:href="#{css/bootstrap.css}" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main CSS -->
<link rel="stylesheet" th:href="#{css/main.css}" href="../static/css/main.css"/>
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css"/>
<!-- Cards CSS -->
<link rel="stylesheet" th:href="#{css/cards.css}" href="../static/css/cards.css">
<!-- JS-File with Charts -->
<script th:src="#{js/dimension_it_infrastructure.js}" src="../static/js/dimension_it_infrastructure.js"></script>
<!-- JavaScript to save data for charts in Model-->
<script>
oEmissions = [];
oEmissions.emissions_total = [[${emissions_total}]];
oEmissions.emissions_servers = [[${servers_emissions}]];
oEmissions.emissions_clouds = [[${cloud_emissions}]];
// Labels and Values for IT Equipment CO2 Emissions Line Chart
aTotalEmissionsByYearITInfraLabels = [[${total_emissions_by_year_it_infra_labels}]];
aTotalEmissionsByYearITInfraValuesNow = [[${total_emissions_by_year_it_infra_valuesNow}]];
aTotalEmissionsByYearITInfraValuesFC = [[${total_emissions_by_year_it_infra_valuesFC}]];
</script>
</head>
<body>
<div class="d-flex flex-column vh-100 overflow-hidden">
<!--Toolbar -->
<div th:insert="fragments/topbar :: topbar"></div>
<!-- Add IT-Infrastructure Own Data Center - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Add :: ITInfrastructure_OwnDataCenter_Modal_Add"></div>
<!-- Add IT-Infrastructure Cloud - Modal -->
<div th:insert="fragments/ITInfrastructure_Cloud_Modal_Add :: ITInfrastructure_Cloud_Modal_Add"></div>
<!-- Page content -->
<div class="row flex-grow-1 overflow-hidden">
<!-- Sidebar -->
<div class="col-auto mh-100 overflow-hidden flex-shrink-0">
<!-- Sidebar -->
<navbar th:include="fragments/sidebar :: sidebar(dashboardActive='', dimensionsActive='active', decarbonizeActive='')"></navbar>
</div>
<!-- Content Section -->
<div class="col mh-100 overflow-auto pe-4">
<!-- Row 1 (Headline) -->
<div class="row">
<h1 class="display-6 text-center">IT - Infrastructure</h1>
</div>
<!-- Error Label -->
<div th:if="${error}" th:text="${error}" class="alert alert-danger alert-dismissible fade show text-center position-fixed top-0 end-0 p-3" style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Success Label -->
<div th:if="${success}" th:text="${success}" class="alert alert-success alert-dismissible fade show text-center position-fixed top-0 end-0 p-3" style="margin-top: 4.5rem; margin-right: 2rem"/>
<!-- Accordion with tables of Own Data Centers and Cloud -->
<div class="accordion" id="accordionPanelsStayOpenExample">
<!-- Accordion-Item 1: Own Data Centers -->
<div class="accordion-item">
<h2 class="accordion-header card shadow" id="panelsStayOpen-headingOne">
<button
class="accordion-button collapsed p-4"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<h5>Own Data Centers (<span th:text="${#numbers.formatDecimal(servers_emissions, 0, 'POINT', 2, 'COMMA')}">0</span>kg CO<sub>2</sub>e)
</h5>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<!-- Button to add Own Data Centers via Modal -->
<button type="button" class="btn btn-sm mb-2" data-bs-toggle="modal" data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Add" style="background-color: var(--own-green-2); float: right">
<i class="bi bi-plus-lg" style="color: white"></i>
</button>
<!-- Check if there are entries for servers table. If there are no entries, a hint text will be displayed -->
<div th:if="__${servers.size()}__ == 0">
<p class="fs-6">
Currently there are no entries for own data centers. You
can add them via the add button!
</p>
</div>
<!-- Check if there are entries for servers table -->
<div th:if="__${servers.size()}__ >= 1">
<table class="table table-bordered table-hover">
<thead class="table-light text-center">
<tr>
<th scope="col">Title</th>
<th scope="col">Amount</th>
<th scope="col">Location</th>
<th scope="col">Start Date</th>
<th scope="col">Period of use</th>
<th scope="col">State</th>
<th scope="col">Power Consumption Active Mode</th>
<th scope="col">
Daily Usage in Active Mode (in hours)
</th>
<th scope="col">Power Consumption IDLE Mode</th>
<th scope="col">
Daily Usage in IDLE Mode (in hours)
</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="text-center">
<tr th:each="server : ${servers}">
<!--<td th:text="${tablet.id}">1</td>-->
<td th:text="${server.title}">5</td>
<td th:text="${server.amount}">5</td>
<td th:text="${server.location}">Germany</td>
<td th:text="${#temporals.format(server.startDate, 'dd.MM.yyyy')}">Lenovo</td>
<td th:text="${server.periodOfUse}">4</td>
<td th:text="${server.state}">4</td>
<td th:text="${server.activeMode}">60</td>
<td th:text="${server.usageActiveMode}">60</td>
<td th:text="${server.standbyMode}">60</td>
<td th:text="${server.usageStandbyMode}">60</td>
<td>
<table class="d-flex justify-content-center">
<tr>
<td>
<div>
<i class="bi bi-pencil-fill text-primary me-3" style="cursor: pointer" data-bs-toggle="modal" data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Update"
th:attr="data-bs-target='#ITInfrastructure_OwnDataCenter_Modal_Update' + ${server.id}"
></i>
</div>
</td>
<td>
<div>
<i class="bi bi-trash-fill text-danger" role="button" type="submit" style="cursor: pointer" data-bs-toggle="modal"
data-bs-target="#ITInfrastructure_OwnDataCenter_Modal_Delete" th:attr="data-bs-target='#ITInfrastructure_OwnDataCenter_Modal_Delete' + ${server.id}"
></i>
</div>
</td>
</tr>
<!-- Update IT Infrastructure Own Data Centers - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Update :: ITInfrastructure_OwnDataCenter_Modal_Update"></div>
<!-- Delete IT Infrastructure Own Data Centers - Modal -->
<div th:insert="fragments/ITInfrastructure_OwnDataCenter_Modal_Delete :: ITInfrastructure_OwnDataCenter_Modal_Delete"></div>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Javascript Imports -->
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
The Java Script coding to let the Message vanish is the following:
/* globals Chart:false, feather:false */
window.onload = function () {
// This coding let the Success Message vanish after some time
$(document).ready(function () {
// autodismiss alerts
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 4000);
});
}
I load the Java Script coding in a extra file but it doesn't causes the problem, even if i put the coding in the same file in which the coding for the side is, it still does not vanish....
Does anyone know why?

Related

how to connect a navigation bar (<nav>) with HTML files in google appscript?

I am developing a code where I have different option levels and I want one of those options to display a nav bar with two tabs: one to search customers and the other to add customers, I already have the loadView, loadCustomersView and loadAddCustomerView function in my clients.html doc, but it does not display the content when I click on the tabs.
How can I make the navigation bar with the search and add clients options show me what is in search.html and addcustomer.html? (see image 3)
step 1, click in opcion1
step 2, click in opcion 1.1
step3, have a nav bar with 2 options: search and add customers
here is a copy of all my files.
codigo.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getOpcion1() {
var html = HtmlService.createHtmlOutputFromFile('opcion1').getContent();
return html
}
function getObtenerClientes() {
var html = HtmlService.createHtmlOutputFromFile('clientes').getContent();
return html
}
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView() {
return loadPartialHTML_("search");
}
function loadAddCustomersView() {
return loadPartialHTML_("addcustomer");
}
Index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Gestor Virtual de Talento 1.0</title>
<style>
.nav-link {
cursor:pointer;
}
#loading {
position:fixed;
top:0;
left:0;
x-index:10000;
width:100vw;
height:100vh;
background-color: rgba(255,255,255,0.9);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-primary static-top mb-5" style="background-color: #072146;">
<div class="container-fluid" style="height:67.33px; background-color: #072146">
<div class="d-flex justify-content-end">
<a class="badge badge-info" href="javascript:ventanaSecundaria('https://docs.google.com')" style="text-align: center;">Guía de usuario</a>
</div>
</div>
</nav>
<div class="container">
<h3>Bienvenidos </h3>
<h6>Selecciona una opción</h6>
<P></P>
</div>
<div class="card-group">
<div class="card">
<div style="text-align: center;" >
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1eBB_kiCc6FDkbDZwkKueZho-yDFeBOHU" alt="Card image cap" alt="" >
<div class="card-body">
<input type="button" value="Opcion 1" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion1()" />
<P></P>
<p class="card-text">Conoce opcion 1</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1osgZRT_0ahKHXGyNbasbx_xaBr2_2orx" alt="Card image cap">
<div class="card-body">
<input type="button" value="Opcion 2" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion2()" />
<P></P>
<p class="card-text">Conoce opcion 2</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1Hmxvyc9gM9KEpdQUalaNCvsPFJV8VYfJ" alt="Card image cap" >
<div class="card-body">
<input type="button" value="Opcion 3" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getPagina3()" />
<P></P>
<p class="card-text">conoce pagina 3</p>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div id="resultado" class="container">
</div>
<P></P>
<script>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=1400,height=700,scrollbars=NO")
}
function actualizarDiv(html, button) {
var div = document.getElementById('resultado');
div.innerHTML = html;
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
opcion1.html
<P></P>
<br>
<div class="container">
<div class="d-flex justify-content-center">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=19CbMDqXEmgtPemrwiAlsaRyZmdMPrZqA" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.1</h5>
<p class="card-text">conoce opcion 1.1</p>
<input type="button" value="Accede aquí" class="btn btn-info"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getObtenerClientes()" />
</div>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=14_9fglXHnJhb4U4Xyy6XApBJ8KEerDd_" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.2</h5>
<p class="card-text">conoce opcion 1.2</p>
<a class="btn btn-info" href="javascript:ventanaSecundaria('https://google.com/')" style="text-align: center;">Accede aquí</a>
</div>
</div>
</div>
</div>
</div>
</div>
clientes.html
<P></P>
<div class="d-flex justify-content-center">
<div class="card mb-5" style="width: 18rem;">
<img src="http://drive.google.com/uc?export=view&id=13n5Nl3nZzL8GRJkG8EeNSPJi-vobrjw_" width="286px" height="180px" class="mx-auto">
<h5 class="text-center">Validación Clientes</h5>
</div>
</div>
<div class="container">
<h6>Selecciona clientes y valídalos.</h6>
<P></P>
</div>
<div class="container">
<nav id="navigation" class="mb-3">
<ul class="nav nav-tabs main-nav">
<li class="nav-item">
<div class="nav-link active" id="search-link">Encontrar cliente</div>
</li>
<li class="nav-item">
<div class="nav-link" id="add-customer-link">Aniadir cliente</div>
</li>
</ul>
</nav>
</div>
<div id="app"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById(id).innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadSearchView(){
loadView({func:"loadSearchView"});
}
function loadAddCustomerView(){
loadView({func:"loadAddCustomersView"});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);
</script>
search.html
<h4>Search</h4>
<div class="mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="search...">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="text-right">#</th>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
</table>
addcustomer.html
<h4>Add a Customer</h4>
<div class="add-customer-form">
<div class="mb-3">
<label for="first-name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="mb-3">
<label for="last-name" class="form-label">Apellido</label>
<input type="text" class="form-control" id="last-name">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
New customer Added!
</div>

My responsive UI isn't responsive in bootstrap

I created a responsive Ui in bootstrap but my layout isn't responsive at all.
I can live with the desktop version, but it looks terrible on mobile and tablet.
How can i fix this?
and what exactly is the reason my layout behaves like that on smaller devices?
you can find a live version here:
uncovered-muscle.surge.sh
Or take a look here for the code if you don't like clicking links
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark indigo">
<a class="navbar-brand" href="#">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">exchange
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How To</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item avatar">
<a class="nav-link p-0" href="#">
<img src="#" class="rounded-circle z-depth-0"
alt="avatar image" height="35">
</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar -->
<div class="container">
<div class="jumbotron card card-image" style="background-color:black;opacity: 0.8;">
<div class="text-white text-center py-5 px-4">
<div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title" style="color:black;">Contract Balance</h5>
<p class="card-text">
<input class="form-control form-control-lg" type="text" placeholder="AGI" id="contractBalanceAgi"><br>
<input class="form-control form-control-lg" type="text" placeholder="SNET" id ="contractBalanceSnet"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="background-color:black;opacity:0.8;" >
<h1 style="text-align:center;color:white;">Invest</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1 AGI</h2>
<br>
<h3>0.00000</h3>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount of AGI</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI available</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your purchase</p>
<!-- Button -->
Approve
<br>
<br>
Mint
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.6;">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text" style="color:white;">Note: 10% entry fees, 10% exit fees, 2% referral fees, 2% dev fees.The sell fee will
only be distributed if you actually sell your tokens. The number of tokens you will receive for your AGI does not include the fees, it's an estimate.</p>
</div>
</div><!-- end of card -->
<br>
<div class="container">
<div class="row">
<div class="col" >
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i> Your Holdings</h5>
<h3 class="card-title pt-2"><strong><h2 class="card-text"><img src="images/agi.png" class="rounded" style="width:15%">1.1 AGI</h2></strong></h3>
<h3 class="card-title pt-2"><strong>AGI VaLue</strong></h3>
<p>AGI</p>
<div class="row" >
<div class="col-sm-6" >AGI</div>
<div class="col-sm-6" >$ 0.13</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
<div class="col">.col</div>
<div class="col">
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
<h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
<div class="row">
<div class="col-sm-6">
<h3>Option 1</h3>
<p>SNET</p>
<button type="button" class="btn btn-primary" id="reinvest">REINVEST</button>
</div>
<div class="col-sm-6">
<h3>Option 2</h3>
<p>AGI</p>
<button type="button" class="btn btn-primary" id="withdraw">WITHDRAW</button>
</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.8;text-align:center;">
<div class="card-body">
<h5 class="card-title">Masternode</h5>
<p class="card-text" style="color:white;" id="masternode">http://snetsaving.com</p>
</div>
</div><!-- end of card -->
<br>
<div class="container" style="background-color:black;opacity:0.8;">
<h1 style="text-align:center; color:white;">Exchange</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1.1 AGI</h2>
<br>
<h3>0.00000 USD</h3>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount to exchange</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>SNET available</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your exchange</p>
<!-- Button -->
<br>
<br>
Exchange
<br>
<br>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
SNETSAVING.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
</html>
I'm using bootstrap for the layout

This is because you're missing the meta tag viewport within your document. I highly recommend you check out the Bootstrap Starter Template, if you haven't already. Adding the following just below <meta charset="utf-8"> should do the trick:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
For more information on the viewport tag you can, for example, check out the article on Using the viewport meta tag to control layout on mobile browsers from MDN web docs. Basically, it ensures that the actual device width will be used for any media queries that e.g. Bootstrap uses for laying out columns. Otherwise, a larger virtual width will be used to ensure compatibility with older sites.

How to initialize divs in DataTables?

I have installed a DataTable in my application and it returns back an error saying "DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2".
Now I understand that DataTables structure is meant to be working with < tr >< td >, but I would like to use spans and divs inside as shown in the preview below.
Is there any way how data tables can work on this structure? Or if there's any good alternative which can do the same job?
Thanks.
$('#dt').DataTable();
// COLLAPSE TABLE
$('tr[data-toggle="collapse"]').click(function(){
$('.insert-here').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<div class="table-responsive">
<!-- Table -->
<table class="table" id="dt">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
<td><i class="fas fa-angle-right"></i></td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<tr>
<td class="insert-here coll-bg" colspan="8">
<!-- START OF COMPLETE ACCOUNT SETTINGS -->
<div class="collapse" id="AccountDetails">
<div class="col-12 pl-0 mt-3">
<!-- START OF ACCOUNT SETTINGS -->
<div class="col-4 pl-0 account-details-box float-left">
<h2 class="accounts-heading">Account Settings</h2>
<!-- Account Status -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Status</p>
</div>
<div class="col-md-6 mb-3 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option>Active</option>
<option>Disabled</option>
<option>Deleted</option>
<option>Pending</option>
</select>
</div>
</div>
<!-- Account Manager -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Manager</p>
</div>
<div class="col-md-6 mb-5 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option selected="selected">--</option>
<option>Bilal Khan</option>
<option>Rishabh Saxena</option>
<option>Abhishekh Joshi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Search in your code maybe you have initialized dataTable twice in your code.
You shold have like this code:
$('#example').dataTable( {paging: false} );
Only one Time.

HTML Table, retrieving data from row and displaying it elsewhere

I'm trying to make it so when you click on a row in the table, depending what row you press, it will display that data into the other panel. So when I click the first row, the Number in the table fills out the number in the other panel, under "Readings". As well as the Name in the table, filling out the Name field under "Readings". How would I go about doing this?
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<!-- end row -->

There you go pal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input
type="text"
id="numberInput"
class="form-control"
placeholder="Number"
disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input
type="text"
id="deviceInput"
class="form-control"
value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- end row -->
<script>
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#numberInput');
var device = document.querySelector('#deviceInput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
device.value = data[1];
}
})();
</script>
</body>
</html>

With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. So you can create a function that handles that click event.
You can either use the onclick attribute or addEventListener method of HTML elements. You can explicitly state the input to the function or calculate it. So say the function name is updateOther, you could do updateOther(1,'First') or updateOther(this). The latter will pass the row element that was clicked and you can extract the pertinent information.

$(document).ready(function(){
$(".gradeA").click(function(){
var currentRow = this;
var number = $(this).find("td")[0].innerText;
var name = $(this).find("td")[1].innerText;
$("form input[type='text']").val(number);
$("form input[type='device']").val(name);
})
});

Jquery .load not using stylesheet

Sorry for bad English title, but I'm currently making my ASE and I want dynamic pages. One container and when clicked on a navigation item it will load the pages into the container.
However, if I use jQuery .load, the style is not correct. It seems it doesn't use the stylesheet from either the main page as the content page. I put the stylesheet link on both. I use Bootstrap.
This is my main.php (the main page with the container):
<?php
include('../includes/global.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title><?php echo Core::getSettings()->getValue('blogname'); ?> ASE - Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="../styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../styles/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../scripts/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../scripts/ie-emulation-modes-warning.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script/ase_main.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><?php echo Core::getSettings()->getValue('blogname'); ?></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<?php include ('headers/navigator.php'); ?>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="mainContent"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/docs.min.js"></script>
<script src="../scripts/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
This is the Dashboard.php (the page dynamically loaded):
<link href="../styles/dashboard.css" rel="stylesheet">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="../scripts/holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
This is the .js (which loads the content):
$(document).ready(function()
{
console.log($('.nav.nav-sidebar').children());
$('.navItem').unbind('click').click(changeContentType);
});
function changeContentType()
{
$('.navItem').removeClass('active');
$(this).addClass('active');
$('#mainContent').load($(this).data('content') + '.php', function(){});
}
Why doesn't it apply the stylesheet?

Categories

Resources