JQuery get method seems to be not working

Question

I have been looking for a way to get the same navigation bar on every page. Right now, I have a jQuery script that is loaded onto every page, that should replace a div placeholder; however, when I run the program, the navigation bar is simply not there.

JQuery code:

$(function() {
$("#dropdown").hover(function() {
    $("#submenu").stop();
    $("#submenu").slideToggle(500);
});

$("#submenu").hover(function()
{
    $("#submenu").stop();
    $("#submenu").slideToggle(500);
});

$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
});

Navigation file:

<nav>
<a href = "index.html">CV Game Development</a>
<div class="menu">
    <div id="dropdown">Tutorials</div>
        <div id="submenu">
            <a href="beginner.html">Beginner</a>
            <a href="intermediate.html">Intermediate</a>
            <a href="advanced.html">Advanced</a>
        </div>
    </div>
</div>
</nav>

Actual HTML file to be used:

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="main.js"></script>
<head>
    <title>CV Game Development</title>
    <div id = "nav-placeholder"></div>
</head>
<body>
    <h1 id = "intro">Welcome</h1>
    <h3 id = "subintro">to the CV Game Development website</h3>

    <p id = "info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>
</html>

It seems like it should work, and yet, it doesn't. Any help is much appreciated, thank you!

What's in your JS console? What debugging steps have you taken? — Dave Newton, Jun 13 '17 at 18:33
You should be using `.load()` instead of making an asynchronous request: https://stackoverflow.com/questions/1246137/ajax-jquery-load-versus-jquery-get. p/s: On a side note, using jQuery is a really ugly solution for your problem: use a templating system instead (you don't even need a CMS to do that). Jekyll is a good start. — Terry, Jun 13 '17 at 18:40

Mohamed-Yousef · Answer 1 · 2017-06-13T19:24:32.427

1st: give <nav> an id to be

<nav id="nav">

2nd: you can use .load() instead of .get() .. And the.load() code should looks like

$('#nav-placeholder').load("navigation.html #nav");

The above code will wrap <nav id="nav"> into <div id="nav-placeholder">

3rd: if you need to replace with you can use unwrap() instead .. so your code should be like this

$('#nav-placeholder').load("navigation.html #nav" , function(){
   $('#nav').unwrap();
});

4th: I don't know yet Why your <div id = "nav-placeholder"></div> inside <head> but any way I tested it and the code will work even if its wrapped to <head> ..

score 1 · Answer 2 · answered Jun 13 '17 at 19:17

As Mohamed-Yousef noticed in comments you have placed your nav-placeholder div element in head tag, which is wrong place for it. It should be inside body element.

Also your meta, css and script tags must be in head element.

<html>

<head>
  <title>CV Game Development</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="main.js"></script>
</head>

<body>
  <div id="nav-placeholder"></div>
  <h1 id="intro">Welcome</h1>
  <h3 id="subintro">to the CV Game Development website</h3>

  <p id="info">Here is an abundance of information to get you started making 2D games with GameMaker: Studio.</p>
</body>

</html>

JQuery get method seems to be not working

2 Answers2