Using javascript on loaded html

Question

I've briefly looked to find any similar questions and found non that are alike or that I understand, so first I apologise if this is a duplicate.

My problem is that I cannot use javascript on loaded (.load) html.

I call a navbar into a div by use of:

$(document).ready(function() {
  $('.nav').load("navbar.html");
});

This works perfectly and I have no problems with this. Problems arise when I want to, for example, add a class to my loaded html code.

The script I currently use (saved in a separate .js file and called at the end of my html code):

$(document).ready(function() {
  $('#home').removeClass('active');
  $('#profile').addClass("active");
});

Here is what I intended to happen to the loaded html code:
This is part of the navbar and is loaded through the first code snippet ^.

<li id="profile"><a href="Profile.html">Profile</a></li>

After page is loaded: (Added: 'class="active")

<li class="active" id="profile"><a href="Profile.html">Profile</a></li>

(This is part of an unordered list using bootstrap nav-tabs.)

Anyway, when I directly put this code into my html page and remove the import through javascript, I can add class's such as the 'active' class. Additionally, I have a slider on my page which uses arrows through the use of javascript to 'slide' through the pictures and I experience exactly the same problem:

When the code is imported I cannot edit through use of javascript, but when the code is present in the actual raw html code, I can. I don't understand why this is as I am fairly new to javascript and its syntax.

Thanks in advance, I'd be happy to answer any questions as I'm sure this isn't exactly clear because I am not entirely sure where the problem lies.

Welcome to SO. I'm struggling to follow you. Would you mind clarify what you mean by "When the code is imported I cannot edit through use of javascript"? — U r s u s
– U r s u s, Commented Jan 17, 2015 at 12:41
The problem has a solution already but just for the benefit of clearing this up - I load my navbar.html file into my Homepage.html file with javascript. However, I cannot edit this code like I can with the code inside navbar.html actually being inside my Homepage.html (not loaded). So when the code (navbar.html) is 'loaded', I lose the ability to add a class such as the 'active' class. The problem, answered below, was that the navbar wasn't fully loaded. Hope this helped clear things up? — Josh
– Josh, Commented Jan 17, 2015 at 13:29

James Waddington · Accepted Answer · 2015-01-17 12:51:23Z

2

What's likely happening is that your code is trying to operate on the loaded html before it has actually loaded. Try putting it in the complete callback:

$('.nav').load("navbar.html", function() {
  $('#home').removeClass('active');
  $('#profile').addClass("active");
});

This will make sure that the code runs after the load has completed.

answered Jan 17, 2015 at 12:51

James Waddington

2,9252 gold badges18 silver badges24 bronze badges

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

2 Comments

Josh Over a year ago

Spoke too soon, this seemed to have worked! Thank you! (I'll vote up once I have 15 rep)

James Waddington Over a year ago

Glad it helped! Can you select it as accepted answer?

Collectives™ on Stack Overflow

Using javascript on loaded html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related