Jquery .load not using stylesheet - javascript

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?

Related

My Success Message (Alert Message) doesn't vanish

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?

Using Jquery tabs isn't working properly

I have 3 different graphs I want to put in tabs and open when selected upon. I used a boostrap elements to make 3 of the graphs. I followed along the Jquery site and used that example and it isn't working how it should. For Example, when I click Tab 1 I want Graph one to appear. I've posted the code below.
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Bootstrap -->
<!-- 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">
<link rel="stylesheet" href="project3.css">
<!-- 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>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

I believe the issue is with the additionally declared jQuery library at the bottom of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
As well, you have not included the jQuery UI library:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
$(document).ready(function(){
$( '#tabs' ).tabs();
});
.col-md-1{ padding: 10px;
border:1px solid white;
}
#size { padding: 10px;
border:1px solid white;
}
#page{padding-bottom: 100px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CS2100 Project 3</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap -->
<!-- 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">
<link rel="stylesheet" href="project3.css">
<!-- 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>
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<div id="tabs">
<ul>
<li>PART 1</li>
<li>PART 2</li>
<li>PART 3</li>
</ul>
<div class="container" id="part1">
<h3>PART 1: 7-Day Forecast (HTML)</h3>
<table class="table table-hover table-bordered text-center">
<tbody>
<tr class="bg-primary text-primary">
<th class="text-center">Forecast</th>
<th class="text-center">Thursday</th>
<th class="text-center">Friday</th>
<th class="text-center">Saturday</th>
<th class="text-center">Sunday</th>
<th class="text-center">Monday</th>
<th class="text-center">Tuesday</th>
<th class="text-center">Wednesday</th>
</tr>
<tr>
<td>High</td>
<td>88</td>
<td>81</td>
<td>75</td>
<td>83</td>
<td>87</td>
<td>90</td>
<td>91</td>
</tr>
<tr>
<td>Low</td>
<td>61</td>
<td>59</td>
<td>52</td>
<td>57</td>
<td>59</td>
<td>63</td>
<td>65</td>
</tr>
<tr>
<td>Precip</td>
<td>0%</td>
<td>50%</td>
<td>40%</td>
<td>10%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</div>
<div id="part2">
<div class="container" id="page">
<h3>PART 2: 7-Day Forecast (Bootstrap Grid)</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-center">Forecast</div>
<div class="col-md-1 text-center">Thursday</div>
<div class="col-md-1 text-center">Friday</div>
<div class="col-md-1 text-center">Saturday</div>
<div class="col-md-1 text-center">Sunday</div>
<div class="col-md-1 text-center">Monday</div>
<div class="col-md-1 text-center">Tuesday</div>
<div class="col-md-1 text-center">Wednesday</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">0</div>
<div class="col-md-1 text-center">88</div>
<div class="col-md-1 text-center">81</div>
<div class="col-md-1 text-center">75</div>
<div class="col-md-1 text-center">83</div>
<div class="col-md-1 text-center">87</div>
<div class="col-md-1 text-center">90</div>
<div class="col-md-1 text-center">91</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Low</div>
<div class="col-md-1 text-center">61</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">52</div>
<div class="col-md-1 text-center">57</div>
<div class="col-md-1 text-center">59</div>
<div class="col-md-1 text-center">63</div>
<div class="col-md-1 text-center">65</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-center">Precip</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">50%</div>
<div class="col-md-1 text-center">40%</div>
<div class="col-md-1 text-center">10%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-1 text-center">0%</div>
<div class="col-md-4 text-center" id="color"></div>
</div>
</div>
</div>
<div id="part3">
<div class="container" id="page">
<h3>PART 3: TCP PACKET STRUCTURE</h3>
<div class="row bg-primary text-primary">
<div class="col-md-1 text-right" id="size">Byte#</div>
<div class="col-md-3 text-center" id="size">+0</div>
<div class="col-md-3 text-center" id="size">+1</div>
<div class="col-md-3 text-center" id="size">+2</div>
<div class="col-md-2 text-center" id="size">+3</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">0</div>
<div class="col-md-5 text-center" id="size">Source Port</div>
<div class="col-md-6 text-center" id="size">Destination Port</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">4</div>
<div class="col-md-11 text-center" id="size">Sequence Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-11 text-center" id="size">ACK Number</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">8</div>
<div class="col-md-1 text-center" id="size">Offset</div>
<div class="col-md-1 text-center" id="size">Reserved</div>
<div class="col-md-5 text-center" id="size">Flags</div>
<div class="col-md-4 text-center" id="size">Window Size</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">16</div>
<div class="col-md-5 text-center" id="size">Checksum</div>
<div class="col-md-6 text-center" id="size">Urgent Pointer</div>
</div>
<div class="row bg-info text-info">
<div class="col-md-1 text-right" id="size">20-56</div>
<div class="col-md-11 text-center" id="size">Options</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

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);
})
});

Signature Pad looses focus

I have this html code with javascript that uses bootstrap and Signature Pad. I am using Bootstrap's Collapse feature. When I set first panel as default the Signature Pad does not work(I am not able to sign) but when I add 3rd panel as Default where the Signature Pad is place, it works as intended.
Any idea why would this happen?
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<link href="css/signature-pad.css" rel="stylesheet" />
<title>Employee Onboarding Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/signature-pad.css">
</head>
<body onselectstart="return false">
<form id="form1" >
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Enter Your Personal Details</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" ID="txtFName" name="txtFName"></td>
<td></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" ID="txtLName" name="txtLName"></td>
<td></td>
</tr>
<tr>
<td>Middle Initial</td>
<td>
<input type="text" ID="txtMiddleI" name="txtMiddleI"></td>
<td></td>
</tr>
<tr>
<td>Other Name</td>
<td>
<input type="text" ID="txtOtherName" name="txtOtherName"></td>
<td></td>
</tr>
<tr><td colspan="3"><button ID="btnSavePersonal" OnClick="btnSavePersonal_Click">Save</button>
</td></tr>
</table>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Answer These Questions</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table>
<tr>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" /></td>
<td>1. A citizen of the United States</td>
<td></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox2" runat="server" /></td>
<td>2. A noncitizen national of the United States (See instructions)</td>
<td></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox3" runat="server" /></td>
<td>3. A lawful permanent resident. (Alien Registration Number/USCIS Number):</td>
<td>
<asp:TextBox ID="txtARNUSCIS" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:CheckBox ID="CheckBox4" runat="server" /></td>
<td>4. An alien authorized to work until (expiration date, if applicable, mm/dd/yyyy):</td>
<td>
<asp:TextBox ID="txtARNExpDt" runat="server"></asp:TextBox></td>
</tr>
<tr><td colspan="3"><asp:Button ID="btnSaveQA" runat="server" Text="Save" OnClick="btnSaveQA_Click" /></td></tr>
</table>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Sign Here</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button save" data-action="save">Save</button>
<input type="text" name="abc" id="abc">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="js/signature_pad.js"></script>
<script src="js/app.js"></script>
</body>
</html>

You have to initialise your canvas. can looks like this:
signaturePad = new SignaturePad(canvas);

I ended up putting my Signature Pad script in iFrame and then handled the responses back to the main page using a hidden input. Worked like a charm.

The home page not displayed in google chrome

I use chrome browser.
I use this row:
<td><a href = '/'; >Home</a></td>
To go back to home page.
For example:
If I have this URL in address bar:
http://localhost:1234/#reportPage
After I press Home,I get this URL in address bar:
http://localhost:1234/
The reportPage is ID of the div tha has data-role="page".
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes).
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. Any idea why I have problems the the code above in google chrome?
Here my HTML code:
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
Sites Mapping
Messages
On Cnostruction
Profile
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
Back
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>

One approach could be to include an input element as first child of body element, with tabindex set to 1 ; using history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td>abc
</td>
</tr>
<tr>
<td id="abc">Home
</td>
</tr>
</tbody>
</table>
</body>
</html>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview

You basically don't go to another page, or reload it. You stay on the same page, just trying to jump to the top. #reportPage takes you to an element with the id reportPage, removing the id doesn't necessary mean "scroll to top". As you seem to get to the top of the page, just change it to:
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top.
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript:
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence.

To be sure of all, add this line of JS in your pages:
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements.
Your code will works! Just use the correct xHtml:
<td>Home</td>
or, to remain in the same folder
<td>Home</td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com

Categories

Resources