Skip to content
Advertisement

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>

Advertisement

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

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement