jQuery include html - adding class to header

Question

I'm using jQuery to include a header to my main index page (as well as other pages). I want to highlight different items of the nav bar (which is in the header.html) using CSS depending on which page the user is currently on. Say if the user is on the Home page, then CSS will add a class to the Home item of the nav bar found in header.html. The problem I'm having is that the class doesn't get added, presumably because I'm trying to add a class to an element that is in another (jQuery loaded) file

index.html looks like this:

<html>
  <head>
    <script>
      $(function(){
        $("#header").load("header.html");
      });
    </script>
  </head>

  <body>
    <div id="header"></div>
    <script>
      $('.homeNav > a').addClass("navSelected");
    </script>
  </body>
</html>

The above is the main page of the site, where I'm using jQuery to load header.html into the div in the body. Then in my body script tag I add the class navSelected to the header element

header.html looks like this:

<header>
  <h1>title</h1>
</header>
<nav>
  <span class="homeNav"><a href="/">Home</a></span>
  <span class="contactNav"><a href="/contact">Contact</a></span>
</nav>

So when the user hits this page, I want to add the navSelected class to the span with class homeNav in header.html, but the class does not get added and I'm not sure what the fix is.

If I use jQuery to add the class from within header.html then the class gets added fine, but that defeats the purpose of only highlighting the nav item relevant to the page the user is currently on

I am not sure but try this approach: $("#header").load("header.html",function(){$('.homeNav > a').addClass("navSelected");}); — Kartikeya Sharma
– Kartikeya Sharma, Commented May 14, 2016 at 19:03
@PeterDarmis that approach really makes no sense. If selector alone doesn't work why would find() work? — charlietfl
– charlietfl, Commented May 14, 2016 at 19:12
Isn't the consept to add class to the menu item selected? Isn't it conected with a click event? — user2560539
– user2560539, Commented May 14, 2016 at 19:35

adeneo · Accepted Answer · 2016-05-14 19:07:49Z

2

jQuery's load() is just a shortcut for $.ajax, and it's asynchronous.

You have to wait for the content to load, before you can manipulate it, and you'd do that by using the callback

$(function(){
    $("#header").load("header.html", function() {
        $('.homeNav > a').addClass("navSelected");
    });
});

answered May 14, 2016 at 19:07

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gdlmx · Accepted Answer · 2016-05-14 19:42:13Z

-1

Your $('.homeNav > a') probably fail to find the DOM elements because this line is executed before the content is loaded (created). So use the callback of load like @KartikeyaSharma suggested.

There is a little change that the AJAX callback doesn't work because the creation of DOM elements takes time, so it is safer to call this function at the end of header.html:

 onNavReady = function (){$('.homeNav > a').addClass("navSelected");}

Inside your header.html call this function at the end

...
<span class="contactNav"><a href="/contact">Contact</a></span>
<script>onNavReady()></script>

edited May 14, 2016 at 19:42

answered May 14, 2016 at 19:13

gdlmx

6,8691 gold badge25 silver badges44 bronze badges

4 Comments

charlietfl Over a year ago

a <span> has no onload event. Very few elements do. There is nothing wrong with calling the code inside the completion callback directly after the elements are inserted

gdlmx Over a year ago

You are right about onload event. But the AJAX callback is fired after the GET/POST request completes, not the creation of DOM elements. Although the change is small , but it can still fail.

gdlmx Over a year ago

As shown in the source of load(), insertion of html and invoke of the callback are done in two separated callback done() and always() respectively. I don't see any guarantee that the DOM is created before the callback is invoked. A much more serious problem is that the AJAX request may fail ... and the callback is invoked in any case.

charlietfl Over a year ago

Have been using load() for 10 years, since early days of jQuery...never had a problem. Doesn't matter if the addClass() got called and element doesn't exist anyway...will fail silently when selector doesn't exist

Collectives™ on Stack Overflow

jQuery include html - adding class to header

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related