0

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)

TylorF
  • 11
  • 1
  • 4
  • So you want to use AJAX, but at the same time you don't want to use AJAX...Man that's very hard to answer... :) This `window.location = linkLocation;` will still reload the page... You have to read more about the AJAX if you want to achieve this. – drip Feb 20 '14 at 09:10
  • If you have little experience with `ajax`, have a look here at the [**jQuery Ajax documentation**](https://api.jquery.com/jQuery.ajax/). Great examples. You need to make an `ajax` call to only load the `div` content from the server and inject it into the `div` instead of using `window.location = linkLocation` which causes your page reload. – Nope Feb 20 '14 at 09:10
  • It looks like you want to change the url without reloading the page? Take a look at this question: http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page or have a look at [history.js](https://github.com/balupton/History.js) – Niklas Feb 20 '14 at 09:11
  • Thanks all for your input, I'll keep trying. It still doesn't quite work, but AJAX seems to be the direction I have to go. Even if I don't want to :) – TylorF Feb 20 '14 at 19:12

1 Answers1

0

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.

David-SkyMesh
  • 5,041
  • 1
  • 31
  • 38
  • This seems to be the right way to go, thank you for adding your insight on this. Even though I hoped not, AJAX seems to be necessary. Thank you for your input. – TylorF Feb 20 '14 at 19:11