Question

I have the following js:

$(function() {
    $('#header a').click(function() {
        $('#contentspace').empty();
        // $("#contentspace").load(eventUrl + "#content");
        $("#contentspace").load(this.href, + ' #content', function(response){
            console.log($('#content', response).html())
            event.preventDefault();
        });
    });
});

and html:

<div id="header" class="ui-corner-all ui-buttonset">
    <a title="index" href="index.php" ><span>home</span></a>
    <a title="code" href="code.php" ><span>code</span></a>
    <a title="design" href="design.php" ><span>design</span></a>
    <a title="illustration" href="illustration.php" ><span>illustration</span></a>
    <a title="writing" href="writing.php" ><span>writing</span></a>
    <a title="links" href="links.php" ><span>links</span></a>
    <a title="about" href="about.php" ><span>about</span></a>
</div>

I use this to load sections of web pages into #contentspace, and give my practice site an ajax kind of feel. The problem arises when the user clicks to go back to the main page, and the main page is loaded inside itself. I thought I might’ve fixed it by adding - ' #header', to the .load argument, but this doesn’t seem to do anything, and even if it had I can see how it would create other problems.

Summary: I’m having problems making an effective landing page with jquery. the home page is loading it’s header and footers into itself.

Answer 1

Maybe you could separate the main page into something like index.html and home.html, index containing only the header and footer and the other containing only the content of the main page.

Then you could have index do the .load with ‘home.html’ once when the page is initially loaded (e.g. just before you attach the click handlers to the nav).