JS : load external file in div on click

Question

I need to load a file in div on click of another div :

My code so far :

<div id="load_home">HOME </div>
<div id="content"></div>

<script>
 $(document).ready(function(){
   $("#load_home").click(function(){
   $("#content").load('code.html');
  });
 });
</script>

https://stackoverflow.com/questions/23723769/read-and-display-the-text-file-contents-upon-click-of-button-using-javascript — vitor13almeida, Aug 30 '17 at 10:30
the file is in the same folder. There is an error in the console `Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.` — octavelhiver, Aug 30 '17 at 10:33

score 0 · Accepted Answer · answered Aug 30 '17 at 10:29

You can use javascript inside the click function to get the HTML file content and attach to the content div like this

<div id="load_home">HOME </div>
<div id ="content"></div>

<script>
 $(document).ready(function(){
   $("#load_home").click(function(){
      document.getElementById('content').innerHTML = loadContent();
  });
 });

function loadContent(){
  var xmlhttp = new XMLHttpRequest();
  var pathToFile = 'code.html';
  xmlhttp.open("GET", pathToFile , false);
  xmlhttp.send();
  return xmlhttp.responseText;
}
</script>

Notice that pathToFile variable holds the actual path of the html file you want to render.

JS : load external file in div on click

1 Answers1