HTML Table, retrieving data from row and displaying it elsewhere

HTML Table, retrieving data from row and displaying it elsewhere - javascript

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

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?

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.

Include Javascript

I want to include some javascript code in my view, but have no idea of how to do it. I've look for that with no success, there is no clear reference of that.
I want to insert some selectable tables with bootstrap, the reference is at https://datatables.net/extensions/select/examples/styling/bootstrap4.html.
the javascript is this
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
the table is this
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
They say that I have to include this javascript librarys
https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js
https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js
But, where do I do that?? there's no html head...
I tryed the tipical
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
document.write(5 + 6);
</script>
How do I fire the code, I suppose that it is done when the table loads, with the reference of #example...
Ok, I have try some things. Certainly I don't want you to solve my issue, but nothing has worked. I include almost the full code. It has to be working as in the example from the upper link . I don't know if the fact that laravel 5.5 is actually working with bootstrap 4 and not the included one is a factor, I don't know actually if it is working by default with jquery...
#extends('layouts.app')
#section('content')
#guest
#else
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Venta</a>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-block bg-light sidebar">
<div class="sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Acciones</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<span data-feather="home"></span>
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="/gymmgr/public/notas/{{ $nota->idNota }}/edit">
<span data-feather="shopping-cart"></span>
Editar
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
onclick="
var result = confirm ('¿Estas seguro de que deseas borrar el grupo?');
if (result)
{
event.preventDefault();
document.getElementById('delete-form').submit();
}
"
>
<span data-feather="users"></span>
Borrar
</a>
<form id="delete-form" action="{{ route('notas.store')}}"
method="POST" style="display: none;">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="/gymmgr/public/notas/">
<span data-feather="users"></span>
Regresar
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h5">Nota de venta</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Exportar</button>
</div>
</div>
</div>
<div class="border-bottom">
<div class="col-md-8 order-md-1 ">
<form class="needs-validation" novalidate>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="true"> Pagada
</label>
</div>
<div class="col-md-12">
<label for="usuario">Usuario</label>
<select class="custom-select d-block w-100" id="usuario">
<option value="">Selecciona...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<p>
<div class="form-group">
<label for="strNota">Comentarios</label>
<textarea class="form-control" rows="3" id="strNota" name="text"></textarea>
</div>
</p>
<p>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</p>
</form>
</div>
</div>
</main>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h5">Partidas</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-horario">+</button>
<div class="modal fade" id="create-horario" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Nueva partida</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('notas.store') }}" method="post">
{{ csrf_field() }}
<div class="modal-body">
<input type="hidden" id="groupID" name="groupID" value= {{ $nota->idNota }} >
<div class="form-group">
<label for="intDia" class="col-form-label">Día de la semana</label>
<select name="intDia" class="form-control">
<option value="1" selected> Lunes</option>
<option value="2" > Martes</option>
<option value="3" > Miércoles</option>
<option value="4" > Jueves</option>
<option value="5" > Viernes</option>
<option value="6" > Sábado</option>
<option value="7" > Domingo</option>
</select>
</div>
<div class="form-group">
<div style="width:50%;float:left;display:inline-block;">
<label for="timHoraInicio" class="col-form-label">Hora de inicio</label>
<input type="time" id="timHoraInicio" name="timHoraInicio" min="9:00" max="18:00" value="09:00" >
</div>
<div align="right">
<label for="timHoraFin" class="col-form-label">Hora de fin</label>
<input type="time" id="timHoraFin" name="timHoraFin" min="9:00" max="18:00" value="10:00">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary" id="submitForm">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</main>
</div>
</div>
</div>
</div>
#endguest
#push('scripts')
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script>
//anyjscode
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );
</script>
#endpush
#endsection
Thanks in advance.

At this to the end of view, but within the section block. If your view is a standalone file, that does not extend any other views/layouts, such as the app.blade.php file, then ignore the section block.
#section <!--this block assumes you're extending another file-->
<your-html>
</your-html>
#push('scripts')
<script src="https://cdn.sample.js"></script>
<script src="https://cdn.sample.js"></script>
<script src="https://cdn.sample.js"></script>
<script>
//anyjscode
</script>
#endpush
#endsection

Hello try with Laravel Collective
How to install? here
Import you js file in your blade file:
{!! HTML::script('js/modulos/comun.js') !!}
And, in you js file write whatever else, for example:
file.js
$(document).ready(function() {
$('#example').DataTable( {
select: true
} );
} );

I think you can achieve what you're after by including a separate yield() in your template file at the bottom of the body tag:
#yield('scripts')
In your view Blade try adding :
#section('content')
Your Content goes here…
#endsection
#section('scripts')
<script type="text/javascript">
<script src="https://cdn.sample.js"></script>
<script>
//anyjscode
</script>
#endsection

Responsive resize with input search box on top

I have the following problem: I am using datatables with multi column filtering on top. If you watch the video at this link you can understand the problem:
https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0
When I resize the browser window, the input search fields are still visible causing an overflow in the table.
Obviously the datatable ha been initialized via javascript with the responsive option.
Here's the HTML:
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
VISUALIZZAZIONE OFFERTE ABITATIVE
<small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
</h2>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
{$sizeOffers = count($offers)}
{if $sizeOffers gt 0}
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
{else}
<div class="alert alert-warning">
Non c'è nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
</div>
{/if}
<hr>
<div class="text-center">
Aggiugi un'offerta
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
</div>
</div>
</div>
</div>
</div>
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
</div>
As you can see, offers.tpl is an included file and contains:
<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
......
</tbody>
Can you help me?

Create responsive tables by wrapping any .table in .table-responsive :
<div class="table-responsive">
<table class="table">
...
</table>
</div>

How to map data coming dynamically into the designed table individually in respective form fields using jquery?

My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here

in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];

you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});

I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}

Develop Reference

JavaScript is the programming language of the Web.

HTML Table, retrieving data from row and displaying it elsewhere - javascript

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

Related

My Success Message (Alert Message) doesn't vanish

How to initialize divs in DataTables?

Include Javascript

Responsive resize with input search box on top

How to map data coming dynamically into the designed table individually in respective form fields using jquery?

Categories

Resources