[Solved] Display another HTML in div from main HTML? [closed]

by


Instead of loading the page into an iframe, you can make an AJAX call to the server and take the response (the page’s contents) and load it into any element you like. But, there are security concerns with AJAX calls and, depending on the site you want to connect to, you may not be able to do this.

<html class="no-js" lang="">
<head>
</head>
<body>
  <div id="storeTable" style="width: 900px; height: 200px;"></div>
  <input type="button" value="Capacity Chart" onclick="CapacityChart();">
  <script>
      // Create instance of XHR to make AJAX call with:
      var xhr = new XMLHttpRequest();
      
      // Configure the component to make the call:
      xhr.open("GET", "http://10.12.34.83:88/Grid.aspx");
      
      // Set up an event handler that will fire as the call moves through its various stages
      xhr.addEventListener("readystatechange", function(){
         
         // If the response has been recieved
         if(xhr.readyState === 4){
            // And the status is "OK"
            if(xhr.status === 200){
              // Inject the results into the container of choice:
              document.getElementById("storeTable").innerHTML = xhr.responseText;   
            } else {
              console.log("Problem getting data");
            }
         } 
      
      });
      
      xhr.send(); // Make the call
</script>
</body>
</html>

2

solved Display another HTML in div from main HTML? [closed]