-1

I have footer.html file in root directory i.e example.com/default/ and I load this file into other html files. Now the problem is in footer.html there are hrefs like

<li><a href="https://example.com/default/contact">Contact</a></li>

When it renders in other file like it renders as footer in 

https://example.com/default/page1/index.html

The contact href becomes

https://example.com/default/page1/contact

How can I set root directory in footer.html so that when it render in page1/index.html, the contact href should be like

https://example.com/default/contact

not like

https://example.com/default/page1/contact

Following are the links in Footer.html and this file is in (Directory: https://surgehost.com/template/footer.html)

<ul class="list-unstyled">
              <li><a href="https://surgehost.co.uk/template/web-hosting">Web Hosting</a></li>
              <li><a href="https://surgehost.co.uk/template/domain-names">Search for a Domain</a></li>
              <li><a href="https://surgehost.co.uk/template/vps">Virtual Private Servers</a></li>
              <li><a href="https://surgehost.co.uk/template/ssl-certificates">SSL Certificates</a></li>
            </ul>

index.html (Directory: https://surgehost.co.uk/template/vps)

<div id="footer"></div>
<script>
    $(function(){
        $("#footer").load("/template/footer.html");
    });

</script>

Now in vps/index.html when I click on web hosting it redirects me to

https://surgehost.co.uk/template/vps/web-hosting

but it should redirect to complete URL i provided hard coded

https://surgehost.co.uk/template/web-hosting

What could be the reason? Please help. I'm losing my mind in this problem.

UzairBinShaukat
  • 25
  • 4
  • When you use a fully URL in the `href` attribute it will link to that specific URL. The URL will not be changed based on in which directory you currently are. Please [edit] your question to include the actual code you have as a [mcve]. Maybe even post the direct links to a (test) website which shows the issue so it can be tested live with a browser. – Progman Jun 16 '20 at 10:35
  • Is there any routing in place, which routes the contact page by default to page1/contact? – Peter van Kekem Jun 16 '20 at 11:36
  • there is no any routing. I'm designing this in simple HTML. And refactoring the footer code by writing it in separate file and importing it to every page as i mentioned in question. – UzairBinShaukat Jun 16 '20 at 13:00
  • @UzairBinShaukat The problem is not reproducible with the code you have provided. Please [edit] your question to include the link to the site where the problem is or show the network traffic in your browser developer tools section (usually via F12, but depends on the browser). It does not "magically" gets redirected to a different URL, only when the server says so or when additional client code does that (like javascript or the usage of the `` tag). – Progman Jun 16 '20 at 13:03
  • https://surgehost.co.uk/template/ this is the link of my site and problem is in footer section. On the home page it works correctly but any other page it not works properly. Please check what's the matter? Thank you. – UzairBinShaukat Jun 16 '20 at 13:52
  • @UzairBinShaukat When you open `https://surgehost.co.uk/template/about` the server is redirecting the user to `http://surgehost.co.uk/template/about/`, notice the "/" at the end. This means you are now in a new directory and all the relative paths are based from that directory. The header uses correct links like `/template/web-hosting` which include the root directory, but the footer does not. Additionally, you don't have absolute URL links as stated in your question. Please [edit] your question to include the actual (relative) links you have and the redirect configuration of your server. – Progman Jun 16 '20 at 13:58
  • Sir I've edited the question and now there are absolute links. I've posted snippet of footer.html you can also inspect code in `https://surgehost.co.uk/template/footer.html` this file I'm importing in each page that are in their own new directories. like `https://surgehost.co.uk/template/about/index.html` and `https://surgehost.co.uk/template/web-hosting/index.html` But I'm giving absolute URLs like `https://surgehost.co.uk/template/web-hosting` not like `/template/web-hosting` in href attribute as you can check in question – UzairBinShaukat Jun 17 '20 at 05:02
  • @UzairBinShaukat The code you posted in your question doesn't match the code you have on `https://surgehost.co.uk/template/`. When you open `https://surgehost.co.uk/template/footer.html` you see that you do not have links with absolute URLs in it (which is good). However your question contains absolute URLs. Please check https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls to see how absolute and relative urls/paths are working in HTML and how they work/resolve to the target URL based on the directory you are in. – Progman Jun 17 '20 at 08:49

2 Answers2

0

Use <a href="/default/contact">Contact</a>. This will use the full path starting from the root, being https://example.com, resulting in https://example.com/default/contact

Peter van Kekem
  • 1,387
  • 1
  • 12
  • 30
0

I have got the solution. The problem was the file I was importing to other pages was in different directory and all other pages were in different directory. I've moved all the files to the root of my domain name and link become from https://example.com/default to https://example.com and in footer.html, i gave the links as follows rather giving absolute URL

<ul class="list-unstyled">
  <li><a href="../about/">About Us</a></li>
  <li><a href="../contact/">Contact</a></li>
  <li><a href="../services/">Our Services</a></li>
  <li><a href="../news/">News</a></li>
  <li><a href="../faqs/">Frequently Asked Questions</a></li>
</ul>
UzairBinShaukat
  • 25
  • 4