How to load Ajax content from Url with out using hash

Question

I have tried looking for many topics but none of them fixes my problem.

I'm currently developing my portfolio site but this is my first time using Ajax. I stuck on this for many days.

I used source code from html5.gingerhost.com and tweak the php part a little bit because I'm not used to php. It only loads [title] of the page into index.html's title and get all the content from html file (only html elements, no js, no css) with the same name as href.

here's the js.

$(document).ready(function(){

    $('.nav a').click(function(e) {

        href = $(this).attr("href");

        loadContent(href);

        // HISTORY.PUSHSTATE
        history.pushState('', 'New URL: '+href, href);
        e.preventDefault();
    });
});

// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
    console.log("pathname: "+location.pathname);
    loadContent(location.pathname);
};


function loadContent(url){
    // USES JQUERY TO LOAD THE CONTENT
    $.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
    // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
        $.each(json, function(key, value){
            $(key).html(value);
        });
    });

    //  SUBTRACT '/'
    url = url.substr(1);

    if(url == ""){
        url = "home"    
    }

    //  ADD '.html"
    url = url.concat(".html")

    //  REPLACE CONTENT INTO THE DIV
    $.ajax({
        url: url
    })
        .done(function(html) {
            $(".content-box").html(html);
        }); 
}

This is working fine when I hit back and forward buttons.

The problem is I'm trying to find how to load Ajax content from the specific Url.

For example,

I want to go directly to www.mysite.com/about but in my directory there's no such directory name 'about', so it returns 'Not found' page to me.

In http://html5.gingerhost.com/ if I type http://html5.gingerhost.com/seattle It shows the Seattle page instead of 'Not found' page like mine.

Please suggest me how to achieve that or give me the keywords of the technique to do these things.

Thank you in advance,

Puck

Answer 1

Be sure to redirect to a relative path for pushState to work. /about, and not the whole URL.

Then you will need a redirection on the web server. In apache for example you can set this in .htaccess, that says that /about should go to index.php/about (or whatever) - and there you will take the "about" from the URL and load what you'll need and give this back to the user.

Apache example redirection for everything but static files and directories to index.php:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.php?$1 [QSA,L]