Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Stu Cowley
Stu Cowley
26,287 Points

Loading External HTML into a <div> using jQuery

Hey guys,

Just wondering if anyone knows of a decent jQuery plugin that would allow me to load external html into a <div> when a user clicks on a link.

Here's where it may be tricky, I have 8 pages.

I have been searching Google and have not been able to find anything that seems stable.

Thanks in advance

Stu :)

Mike Baxter
Mike Baxter
4,442 Points

I'm not sure about jQuery specifically, but I know HTML 5 came with an exciting new element for this. Well... it wasn't exciting enough that I remembered the name of it. It basically allows you to add content from another HTML file (or whatever else) as if you had never visited that page. So like on Facebook, your URL never changes even though you keep scrolling, but it's continually adding content from something like "page-2", "page-3" and so on. I doubt Facebook works like that, but that's the general idea. I can't seem to find the method right now, but that may be somewhere to look for your solution.

Mike Baxter
Mike Baxter
4,442 Points

I think it's this:

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

6 Answers

Armin Broubakarian
Armin Broubakarian
15,316 Points

Stu,

The link you provided seems like a great solution for what you are looking for. All you need to do is follow the steps and style your nav links the way you want too.

I wrote another script with multi links so you get a better understanding.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Include</title>
    </head>
    <body>
        <a href="#link1">Link1</a>
        <a href="#link2">Link2</a>
        <a href="#link3">Link3</a>
        <a href="#link4">Link4</a>


        <div id="include"></div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript"> 
            var includeDiv = $("#include");
            $(window).on('hashchange', function() {
                var href = location.hash.slice(1) +".html";
                includeDiv.load('include/' + href);
            });
        </script> 
    </body>
</html>

Hope this helps.

Armin Broubakarian
Armin Broubakarian
15,316 Points
Armin Broubakarian
Armin Broubakarian
15,316 Points

Stu,

I made this workspace ( http://teamtreehouse.com/workspaces/5382 ) to demo how you can accomplish your request using jQuery. (jQuery .load https://api.jquery.com/load/)

I'm sure you're aware that you can accomplish this same task very easily using a server side language as well.

As for using HTML5 imports by declaring a <link rel="import"> it is not fully standardized yet. :)

Hope this helps, Armin

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Armin,

I tried to view the workspace demo that you prepared but it took me to a Bummer, It appears the page you're looking for doesn't exist.

Maybe post the code here?

Sorry for my late reply, I've been away.

Stu

Armin Broubakarian
Armin Broubakarian
15,316 Points
Armin Broubakarian
Armin Broubakarian
15,316 Points

Hi Stu,

I'm sorry about that. I had a feeling it might do that. "Workspaces" is a new tool on Treehouse and I thought we can share our workspace with other users to show off some code as demo.

Here is the code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Include</title>
    </head>
    <body>
        <div id="include"></div>
        <a id="link" href="#">Click Test Link</a>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript"> 
            $("#link").click(function(){
                $("#include").load("include/test.html"); 
            });
        </script> 
    </body>
</html>

So the external html file is called "test.html" and it is in a folder called include. Let me know if you have any other questions.

Joshua Hardy
Joshua Hardy
17,317 Points

Is there a way to do this without the .click? Can the .load perform its task automatically?

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hey Armin,

Thanks for getting back to me so quickly about this. I have looked over and tested out your code and I think it's working.

To clarify this is exactly want I am looking for, except the navigation links are to the left and not in an in-line position http://css-tricks.com/dynamic-page-replacing-content/

Stu :)

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Hi there Armin,

This is exactly what I'm looking for!

Thank you so much!