How to Ensure Elements have Loaded Before Adding Class on PageLoad

Question

I have the following bit of code, which first loads a navbar to the website on page load (this is so that I don't have to create a new navbar for each page):

<div id="nav"></div>

<script>$( "#nav" ).load( "nav.html" );</script>

And to show the "active" tab for that page, I have the following script:

<script>
    window.onload = function() {
        document.getElementById('lindex').className = 'active';
    };
</script>

However, when the page loads, I am seeing this error in the console (for the document.getElementById line):

index.html:70 Uncaught TypeError: Cannot set property 'className' of null

And the "active" tab does not update when I navigate to the page. Strangely, it does seem to add the class when I reload the page, but intermittently. Does anyone know why this might be happening?

Here is the code for the navbar (nav.html):

<nav class="navbar navbar-inverse ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    <a href="#" class="navbar-left navbar-logo"><img src="/img/logo.png"></a>

    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li id="lindex" class="listitem"><a href="index.html">Home</a></li>
        <li id="lpandp" class="listitem"><a href="productsandpurchasing.html">Products & Purchasing</a></li>
        <li><a href="#about">Freight & Distribution</a></li>
        <li><a href="#about">Blog</a></li>
        <li><a href="#contact">Contact Us</a></li>
        <li class="dropdown">
        </li>
      </ul>
    </div>
  </div>
</nav>

I have also tried:

$(function() {
  $('#about').addClass('expand');
});

But this doesn't seem to work either, unless I refresh the page after navigating to it.

@madalinivascu I have used them in `Ruby on Rails` but never in a pure css/html/js page - is this possible? — Bassie, Jul 15 '16 at 10:55
Check this http://stackoverflow.com/questions/4995440/add-class-to-object-on-page-load — vignesh, Jul 15 '16 at 10:55
is your server incapable of providing a server side language so you can use partials? — madalinivascu, Jul 15 '16 at 10:58
@madalinivascu your posted answer appears to work, I will accept it when I can. The page I am creating will not be using any server side languages fr the time being (this is temporary) - thank you for your help! — Bassie, Jul 15 '16 at 11:01

score 1 · Accepted Answer · answered Jul 15 '16 at 10:57

1

Try the following

<script>$( "#nav" ).load( "nav.html",function(){
  $('#lindex').addClass('active');// add the class after the nav is loaded
});</script>

answered Jul 15 '16 at 10:57

madalinivascu

32,064
4
39
55

score 0 · Answer 2 · edited Jul 15 '16 at 11:56

0

$("#lindex").addClass("Your Class Name");

edited Jul 15 '16 at 11:56

answered Jul 15 '16 at 10:58

Anju

39
8

I have tried this, similar to the script in my solution, it doesn't seem to wait for the element to load before attempting to add the class. The other answer seems to work though – Bassie Jul 15 '16 at 11:00
While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, as this reduces the readability of both the code and the explanations! – Blue Jul 15 '16 at 12:01

score 0 · Answer 3 · answered Jul 15 '16 at 11:09

       $( document ).ready(function() {
            console.log( "ready!" );
             $( "#nav" ).load( "nav.html");
             console.log( "after load nav.html!" );
                     //add the class here 
             $('#lindex').addClass('active');

        });

How to Ensure Elements have Loaded Before Adding Class on PageLoad

3 Answers3