Executing JavaScript in partial html for single page navigation

Question

I am new to JavaScripts, and I'm attempting to build a single page navigation blog using bootstrap. I have a basic index.html which has the following code:

<Some bootstrap navbar on top that includes "home", "about", "contact">

<div id="content">
</div>

<script src="navigation.js"></script>

The navigation.js file has a window.addEventListener("hashchange", navigate) that just listens for the hashchange and sets the innerHTML of the content-div based on the hash. The actual content for each of the pages is seperated into partial html files, for example about.html that only has <p>About</p> for now, and these partial htmls are fetched using AJAX.

So far everything works, but for the home.html I don't have only static HTML, i also want to execute a JavaScript that renders all the blog posts. Basically I would want home.html to include:

<div id="posts">
</div>
<script src="renderposts.js"></script>

Where renderposts.js is a script that sets the innerHTML of the posts-div to include all my blog posts.

This doesn't work though, renderposts.js is not executed. Am I thinking about this the wrong way and how should I approach this? The only work-around that I've managed is to include the code in the navigation.js file instead, and execute it with an if-statement checking if the location.hash is currently "#home". This is obviously a very ugly solution.

Does renderposts.js just have code that is executed when it's loaded, or is it a series of functions? — Aaron Dougherty, Oct 01 '15 at 08:41
renderPosts has two functions ("getPosts" and "renderPosts") that are executed from within the file when it's loaded — Jonas Svalin, Oct 01 '15 at 08:47

score 0 · Answer 1 · answered Oct 01 '15 at 08:42

I didn't find this post when searching the topic but it appeared in the related section after posting: Load partial html with javascript inside

Basically, changing from contentDiv.innerHTML = content; to jQuerys $('div#content').html(content); fixed the issue. I'm still curious whether this is the "correct" way to go about the principal issue, or if I'm approaching the whole thing incorrectly.

score 0 · Answer 2 · answered Oct 01 '15 at 08:53

One way to handle it is to link renderposts.js from your main page, then in the function that loads home.html, it can then execute the javascript functions. Something like

<script src="navigation.js"></script>
<script src="renderposts.js"></script>
<button onclick="loadHome">Click Me</button>

<script>
    function loadHome() {
        // Some AJAX Requst Here //

        var contentDiv = document.getElementById("content");
        contentDiv.innerHTML = content;
        getPosts();
        renderPosts();
    }
</script>

Excellent, I will play around with this. Thanks! (unfortunately my reputation score is too low to upvote, but your help is much appreciated!) — Jonas Svalin, Oct 01 '15 at 09:03

Executing JavaScript in partial html for single page navigation

2 Answers2