Question

I’m not very elite when it comes to JavaScript, especially the syntax. So I’m trying to learn. And in this process I’m trying to implement a content loader that basically removes all content from a div and inserts content from another div from a different document.

I’ve tried to do this on this site:
http://www.matkalenderen.no – Check the butt ugly link there. See what happens?

I’ve taken the example from this site:
http://nettuts.s3.cdn.plus.org/011_jQuerySite/sample/index.html#index

But I’m not sure this example actually works the way I think it does. I mean, if the code just wipes out existing content from a div and inserts content from another div, why does the other webpages in this example include doctype and heading etc etc? Wouldn’t you just need the div and it’s content? Without all the other stuff “around”? Maybe I don’t get how this works though. Thought it worked mosly like include really.

This is my code however:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#dynloader a').each(function(){
            var href = $(this).attr('href');
            if(hash==href.substr(0,href.length-5)){
                    var toLoad = hash+'.html #container';
                    $('#container').load(toLoad)
            }                                                                                        
    });

    $('#dynloader a').click(function(){

            var toLoad = $(this).attr('href')+' #container';
            $('#container').hide('fast',loadcontainer);
            $('#load').remove();
            $('#wrapper').append('<span id="load">LOADING...</span>');
            $('#load').fadeIn('normal');
            window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
            function loadcontainer() {
                    $('#container').load(toLoad,'',showNewcontainer())
            }
            function showNewcontainer() {
                    $('#container').show('normal',hideLoader());
            }
            function hideLoader() {
                    $('#load').fadeOut('normal');
            }
            return false;

    });

});

Answer 1

The jQuery .load() has some extra functionality in it to support this.
You can see it in the docs here (look at `Loading Page Fragments’)

In your example here’s the important part: hash+'.html #container' the space before the #container means that jQuery will grab that URL, look for the element with id="container" and fetch only that element’s content’s discarding the rest of the page. This lets .load() work in a more generic way without what you’re fetching being specifically designed for only ajax loading.

In your case I think you just need to remove #content from the end unless you’re looking for that element. It’s not saying “look for content” that’s just the ID they used for the element they wanted to look for. It could have been #divToLoad which would be a clearer example IMO.