0

I want to include HTML to an other HTML with a script, which I get from another website. This script works great if the HTML files are in the same folder, but if I want to include a HTML file from subfolder it does not loading it. And my question is why it does not work?

The HTML file to include is in /main folder named navbar.html. And the HTML which needs to get the other is in /main/subfolder. I am going one folder back using "../".

The script is:

    w3.includeHTML = function(cb) {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("w3-include-html");
          w3.includeHTML(cb);
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};

And this is the HTML to get:

<!-- Navigation -->
  <div w3-include-html="../navbar.html"></div> 
    <script>
        w3.includeHTML();
    </script> 
<!-- /Navigation -->
  • use jquery for simlicity in loading another html in ajax manner .. [like this]https://www.w3schools.com/jquery/jquery_ajax_load.asp – Mojtaba Pourmirzaei Jul 18 '17 at 10:00
  • define "does not work". Do you get a 404 error? Or something else? – ADyson Jul 18 '17 at 10:05
  • It does not load the HTML, displays nothing. But there is no error message –  Jul 18 '17 at 10:08
  • 1
    mojtaba-pourmirzaei , is your method better then my one? –  Jul 18 '17 at 10:16
  • Have you checked for errors in the browser console, not just on screen? And what about in your network tab? When you make the ajax call, what's the HTTP response code? Is there any content in the response body? – ADyson Jul 18 '17 at 10:34
  • Now I have tried the same with the Ajax method with the link of Mojtaba Pourmirzaei and get a 404 Error Message. –  Jul 18 '17 at 10:50
  • so that means either the file is not where you think it is, or is named wrongly, or your path to it is wrong. I would suggest using an absolute URL (e.g. main/navbar.html) rather than a relative one. I suspect ajax does not handle that properly. Check the URL it is actually calling (you can see the full URL in the network tab in the request details) and see if it makes sense. – ADyson Jul 18 '17 at 10:57
  • Ok, now I have tried it on a local server and checked the urls as you say it... And solved the problem. –  Jul 18 '17 at 11:10
  • yes,using library like jquery make all these needed very simple with just wrapper (but page must load 40-100KB of javascript more for library!) ,and you dident want to write so much script like the one you write. for example checking like getting good response ( 200&400 code) is omitted.[,https://stackoverflow.com/questions/18145273/how-to-load-an-external-webpage-into-a-div-of-a-html-page] also when you use these library they have tons of plugins which are for specific needs. – Mojtaba Pourmirzaei Jul 19 '17 at 03:56
  • You can try using an absolute path to the navbar.html file instead of a relative path. For example, if the navbar.html file is in a folder called main at the root of your website, you can try using the absolute path "/main/navbar.html" instead. – Mohammad Tahvildary Dec 14 '22 at 09:47

0 Answers0