Changing div#content without reloading using Jquery

Question

I have been reading this board all night and I haven't found anything that quite hits the answer I need on the head, so I will ask.

Here's the basic idea of what I'm doing.

1. On Page Load, fade in, and display the default page.
2. User Clicks Navigation Link (a.navLink).
3. div#content fades out, calls a function to redirect.
4. div#content fades in with new content.

I have it at about 90% however, it's not quite right. I am using a PHP Switch to manage content on the site using the $_GET superarray. My basic switch structure is as follows:

switch( $_GET['page'] ){
  default:
    //DISPLAY HOME PAGE
  break;

  case "story":
    // DISPLAY STORY
  break;

  case "contact":
    // DISPLAY CONTACT  
  break;    
}

and so on...

The JQuery I'm using to perform the Fade In / Fade Out Action is as Follows:

$("#content").css("display", "none");

$("#content").fadeIn(1000);

$("a.navLink").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(500, redirectPage);      

    function redirectPage() {
        window.location = linkLocation;
    } 

});

The current code successfully fades out, changes pages and fades back in, but the problem is the site reloads, causing the rotating banner I have at the top of the page to restart. Also, the page starts back at the top as if the site had just been loaded. I know that this likely needs an AJAX function, but I have very little experience using AJAX (I often avoid it like the plague).

It is very important that I use the Switching structure I have in place, and I haven't had much success hashing it. The URL that I would be working with is DOMAIN.COM/index.php?page= pageName . Again, this structure is very important and cannot be changed.

Any insight on this would be great. (Again, I understand this question type may have been asked before, but i feel that I need one line at most, and I'm trying to find out what that is)

Answer 1

Instead of

window.location = linkLocation;

Use Ajax to re-load only #content :

$( "#content" ).load(linkLocation, function(){
    $('#content').fadeIn(500, function(){
        // do something when the re-load is finished
    });
});

You can't change the URL of the window via AJAX, but you could change window.location.hash . Others (in the comments) have mentioned using the history API.