CODEWITHSUNDEEP
jqueryhtmlajaxdynamicload
Bret M
Bret M

Reputation: 1

Jquery how to load an external html file's div into a container div when a link is clicked..?

My site has a navbar on top and each category that is clicked slides down a div which contains content. However, as of now all of this content is loaded all at once when going to the site, which is totally unnecessary once I add some more articles, posts, images etc.

I want to dynamically load content from an external file (so say, when you click "about" in the navbar it slides down to reveal the content of "about.html" into a div). For organizational sake, I'd hoped to have each section to have it's own .html file so I could easily edit in the future. Basically, I want jquery to load the wrapper div from something like "*variableSectionName".html" into a div.

Here is the jquery code, uses a variable "section" to display that div id's content. This works properly, but I cannot get a jquery .load() to load something like .load(section+".html"+id):

    $(document).ready(function() {
    var active_section;
    $("#slider a.section").click(function(e) {
        e.preventDefault();
        var section = $(this).attr('href');
        if (section !== active_section) {
            $('.pagedrop').slideUp('slow');
            $('.lower').find(section).slideDown('slow', function() {
            active_section = section;
            });
        }
    });
});

Here are what the links look like in the index.html, several of these with different names. My current jquery code gets the href "#about" from this and uses it to make only one section visible at a time:

<a href="#about" id="aboutlink">
<h2><span>About</span></h2>
</a>

The index.html contains a div formatted for content already, something like this:

    <div class="lower">
        <div class="pagedrop" id="content">
<!-- Container to lazy-load content on a per page basis -->
        </div>
    </div>

And this is a sample of what one of the external files looks like. These external files are only blocks, and do not contain the usual html/head/body tags:

<div id="about">
        <h1>About</h1><img src="images/divider.png"/>
        <p><p:first-letter>Q</p:first-letter>uisque venenatis interdum purus, non sagittis turpis feugiat vel. Mauris accumsan luctus lacus, sed facilisis est vehicula eget. Etiam tempor lacus ac fermentum facilisis. Donec semper urna quis odio lobortis dignissim. Duis et metus non arcu venenatis dapibus ut sit amet enim. Nullam quis elit odio. Donec ultrices tincidunt nulla at vestibulum. Pellentesque risus ligula, mollis eget est nec, rhoncus ultricies nunc. Aenean scelerisque risus suscipit enim sollicitudin commodo.
        </p>
        </div>

In short: I want to load from "about.html" into the box on the "index.html"

Upvotes: 0

Views: 7729

Answers (2)

Gurminder Singh
Gurminder Singh

Reputation: 1755

You can use .pjax() like:

<script type="text/javascript">
    $(document).pjax('a', '#pjax-container');
</script>

More info on this link.May be it can help!

Upvotes: 0

Khush
Khush

Reputation: 853

Look at the .load() function in jquery. Please refer to the jquery API for more details, http://api.jquery.com/load/

You should be able to load a whole page or certain div/sections from another HTML page.

A code example with .load and .live this should work with .live

$(document).ready(function () {
    $("a.view").live('click', function () {
        var id = $(this).data("id");
        $('#container').load("view.php?" + id,myCallback);
    });
});

Referenced from here: How do I change dynamic page title while .load()

Upvotes: 2

Related Questions