Skip to content

How to add multiple views in html page in javascript?

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>

Answer

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