I have this two html code where index.html is the main view as view 1. But I also want to add the temparature.html as View 2. How can I do it from the index.html page? i have added all the files what I am using are added below.
the index.html waht I want to use as View 1
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.hide
{
display: none;
}
</style>
<button id="showPage1Btn" data-launch-view="page1">View 1</button>
<button id="showPage2Btn" data-launch-view="page2">View 2</button>
<button id="showPage3Btn" data-launch-view="page3">View 3</button>
</head>
<body>
<div id="lotOfPages">
<div class="view" id="page1">
<h1>View 1</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'http://webapi19sa-1.course.tamk.cloud/v1/weather',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i].data)[0]}</td>
<td>${data[i].data[Object.keys(data[i].data)[0]]}</td>
</tr>`
table.innerHTML += row
}
}
</script>
</div>
<div class="view hide" id="page2">
<h1>View 2</h1>
</div>
<div class="view hide" id="page3">
<h1>View 3</h1>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Supporting JS for index.html
$(document).ready(function (e) {
function showView(viewName) {
$('.view').hide();
$('#' + viewName).show();
}
$('[data-launch-view]').click(function (e) {
e.preventDefault();
var viewName = $(this).attr('data-launch-view');
showView(viewName);
});
});
And the temparature.html what I want to see as view 2 .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i])[2]}</td>
<td>${data[i].temperature}</td>
</tr>`
table.innerHTML += row
}
}
</script>
After the advice to request one single file, I added temparature.html file under the div class="view" id="page2" but no luck. Can you help me?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.hide
{
display: none;
}
</style>
<button id="showPage1Btn" data-launch-view="page1">View 1</button>
<button id="showPage2Btn" data-launch-view="page2">View 2</button>
<button id="showPage3Btn" data-launch-view="page3">View 3</button>
</head>
<body>
<div id="lotOfPages">
<div class="view" id="page1">
<h1>View 1</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'http://webapi19sa-1.course.tamk.cloud/v1/weather',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i].data)[0]}</td>
<td>${data[i].data[Object.keys(data[i].data)[0]]}</td>
</tr>`
table.innerHTML += row
}
}
</script>
</div>
<div class="view" id="page2">
<h1>View 2</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{
color:#fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>Row Number</th>
<th>Date</th>
<th>Time</th>
<th>Measurement Type</th>
<th>Value</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method:'GET',
url:'http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${i}</td>
<td>${data[i].date_time.substring(0, 10)}</td>
<td>${data[i].date_time.substring(11, 19)}</td>
<td>${Object.keys(data[i])[2]}</td>
<td>${data[i].temperature}</td>
</tr>`
table.innerHTML += row
}
}
</script>
</div>
<div class="view hide" id="page3">
<h1>View 3</h1>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
According to your code place temperature.html table inside below div which has id 'page2' and bring all supportive links to index.html.
<div class="view hide" id="page2">
</div>
Change view2.html
to page2.html
because id and filename should be same to work more efficiently. Add window.location.href
to showView(viewName)
function showView(viewName) {
...
window.location.href = viewName+'.html'; //since viewName is page2 so change filename to page2.html
}
You don't required hide
and show
now onwards. Just move
<div class='view' id='page2'>
<h1>View 2</h1>
</div>
to page2.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.