Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Mary Healy
Mary Healy
7,818 Points
Posted by Mary Healy
Mary Healy
7,818 Points

Trying to implement DRY using jQuery load().

Hi i am trying implement DRY by using jQuery load(). I want to have navbar.html that is on each page and is called by load() rather than having it on each html. All my files are in the same directory at the moment but I cannot seem to make the navbar load on the services page. please see my code below. I think there is a simple solution maybe its my syntax.

js:test.js 
$(document).ready(() => {
  $("#nav-placeholder").load("/navbar.html");
  $('#h1').html("heeey") /* test line to make sure filepath is correct */
});
html:navbar.html 
<div id="nav-placeholder">
  <div class="navbar-ad">
    <div class="navbar-logo">
      <a href="#"><img id="logo" src="../images/logo.png"></a>
    </div>

    <div class="navbar-right">
      <a href="index.html" target="_blank" class="navbar-items navbar-home">Home</a>
      <a href="services.html" target="_blank" class="navbar-items navbar-services">Services</a>
      <a href="contact.html" target="_blank" class="navbar-items navbar-contact">Contact</a>
    </div>
  </div>
</div>
html:services.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A_D Acupuncture in Amsterdam | Best In Amsterdam</title>
  <meta name="description" content="A_D Ac  upuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
  <meta property="og:title" content="A_D Acupuncture in Amsterdam | Best In Amsterdam">
  <meta property="og:image" content="facebook-card.jpg">
  <meta property="og:description" content="A_D Acupuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
  <meta property="og:site_name" content="A_D Acupuncture"/>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Lora:700|Merriweather" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="test.js" async=""></script>


</head>

<body>
   <div id="nav-placeholder">

   </div>
  <h1 id="h1">hello world</h1> /* test */

</body>
</html>
Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Post edited for readability.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Have you checked the Network tab in your browser's Dev Tools?

What does it display for that file?

On the topic of Dev Tools, have you stepped through your code to see if you can determine the cause of the issue?

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Perhaps it's a path issue.

Have you tried removing the leading slash for navbar.html in the call to load()? Or using the absolute path instead of relative?

As an aside, I think you could remove <div id="nav-placeholder"> from navbar.html as load() will insert the returned data into the element that you are loading into. You will likely have <div id="nav-placeholder"><div id="nav-placeholder"> as a result, which it appears you probably do not want since you are using id's.

Mary Healy
Mary Healy
7,818 Points
Mary Healy
Mary Healy
7,818 Points

Hi Sean, Thanks for the help. I tried lots of different file paths but nothing seems to work. I put all files in the same folder so as to avoid a path issue.

i removed <div id="nav-placeholder"> from navbar.html .

I checked for spelling mistakes :) but i cannot find the issue.

Any more thoughts

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Mary Healy, Are you using a web server at all? Perhaps your issue is related to this discussion at StackOverflow - https://stackoverflow.com/questions/19902538/loading-local-files-with-javascript-without-a-web-server

Another step you could attempt is to use the Workspaces here for testing and experimenting.

Mary Healy
Mary Healy
7,818 Points
Mary Healy
Mary Healy
7,818 Points

Hi Sean,

I am using Sublime and opening locally.

I tried to use Workspaces but my i get this error "Workspace Unavailable This is a preview link for a Treehouse Workspace that is not currently active.

If you are the workspace owner, you can launch it again via the Treehouse site."

I followed a number of articles from Stackoverflow but can't get it to work

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

To create a new Workspace:

  • Click the 'Workspaces' link at the top of the page
  • (Optional) Start the tour
  • Click 'New'
  • Name your Workspace (you can leave the other values as defaults)
  • Click create -- A new browser window will be created of the Workspace environment
  • Create your directories and files
  • Copy the content of your existing files to the appropriately created files
  • Save
  • Click the Eye icon to preview

When you go back later to your Workspaces page you can open any previous one you have created.

You can have a total of 100 Workspaces.

You can download the content within a Workspace.