0

Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.

<!-- This is in my main HTML that I want nav in-->
    <div id="nav-placeholder"></div>
    
    <script>
    $(function(){
      $("#nav-placeholder").load("NavBar.html");
    });
    </script>

<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
            <div class="header-column d-lg-none">
                <div class="header-row">
                    <h1 class="font-weight-semibold text-7 mb-0">
                        <a href="index.html" class="
              text-decoration-none text-color-light
              custom-primary-font
            ">Dynamic</a>
                    </h1>
                </div>
            </div>
</div>
</header>
Wayne
  • 660
  • 6
  • 16
  • What's the question? People use `load` all the time. jQuery didn't add it for giggles. If you're looking for opinions on its utility, that's off-topic on Stack Overflow. – Heretic Monkey Jun 15 '21 at 16:41
  • I'm going to edit the question it's not working – Wayne Jun 15 '21 at 16:49
  • 1
    Use the `complete` function argument to be told when the load completes. See [the documentation for more](https://api.jquery.com/load/). – Heretic Monkey Jun 15 '21 at 17:13

1 Answers1

1

it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.

Have a look on this question: How to separate html text file into multiple files?

  • Thank you very much I tried this, but it didn't work I don't know if there is something wrong with my NavBar file that makes it not insert properly. – Wayne Jun 15 '21 at 17:13
  • 1
    Well, aparently you cannot embed both files if they are local on your pc. I tried it and got CORS error. Check out what this guy is saying: https://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht/20578692#20578692. – João Paulo CR Jun 18 '21 at 00:10