-1

Basically, I have a few sections, a header, two sidebars, and a footer to my website with the main content in the center. I used a table for most of the formatting for this design. What I would like to do is have one HTML file for each generic section, header footer and sidebars. That way I don't have to edit every page when I need to change something on the rest of the pages.

I usually would use PHP to do this but the server I am working on does not read PHP and it seems I can't get the IT guys to install it. I have tried a JavaScript method but the JavaScript method does not seem to be working and I am not sure why. This is an example of the JavaScript I method I was trying:

  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#header').load("header.html");
        $('#rsbar').load("rsbar.html");
        $('#lsbar').load("lsbar.html");
        $('#footer').load("footer.html");
     });
  </script>
  </head>
  <body>
     <div id="header"></div>
     <div id="rsbar"></div>
     <div id="lsbar"></div>
     <div id="footer"></div>
  </body>

Where header rsbar lsbar and footer would be separate HTML files I'd want to pull the code from.

Also if I can get this method to work. If my file structure looks something more like this:

html
-->header
-->footer
-->lsbar
-->rsbar
css
js
images
pdfs
pages

and the file that I want to use to call the header HTML from using the JavaScript is in pages, for the code going back one directory and then to the HTML would the filepath work as '../html/header.html' as an example? I was having issues trying this but can't seem to find what else I'd use to move up the directory one folder...

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Matthew Barr
  • 11
  • 2
    There is `iframe` but that's something you most likely don't want to use. Instead of that you probably want to compose those files on your pc and upload the composed files as HTML to the server. – t.niese Aug 09 '21 at 15:25
  • 2
    There are many templating engines and static site generators that might do the trick for you. A fairly popular and simple one is https://www.11ty.dev/ – AKX Aug 09 '21 at 15:27
  • 3
    Keyword: *static site generator*. Does what PHP does, but simply once on your computer, and then just spits out static HTML. – deceze Aug 09 '21 at 15:28
  • 1
    Where is the page that calls `.load`? Your paths need to be relative to that. `../` is correct for backing up one folder. – Heretic Monkey Aug 09 '21 at 15:29
  • 1
    @HereticMonkey so the link you send is pretty similar to what I have found online elsewhere, and the function just isn't working on my pc for some reason. I have copied and pasted everything, wrote it myself, made just testfiles to test that code but it just isnt working and I do not understand why it would not work since it seems to be the most popular solution to this problem. – Matthew Barr Aug 09 '21 at 15:35

1 Answers1

1

If the index file is located at the root and the other pages are inside a folder called html it would be more like this:

<script>
 $(document).ready(function(){
    $('#header').load("html/header.html");
    $('#rsbar').load("html/rsbar.html");
    $('#lsbar').load("html/lsbar.html");
    $('#footer').load("html/footer.html");
  });
</script>

You should look at the browser console to see if you have any failed requests.

Fasani
  • 5,141
  • 1
  • 23
  • 24
  • Ok i am getting one error if i read inspect element, for reference though I am on microsoft edge not chrome, im just testing the files before I upload them to server, would they potentially work if i just uploaded them to the server based on this error? Error: Access to XMLHttpRequest at 'file:///C:/Users/sgfki/Documents/Summer2021/case2022.org%20-%20TESTING%20PLACE%20ONLY/Page/header.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted. – Matthew Barr Aug 09 '21 at 15:41