Website navigation without Reload using ajax does not work properly

Question

all right?

Next, I’m making a website with navigation on AJAX, so that it is not necessary to upload the site every time you visit a page. Home, news, contact, etc..

I managed to do the site, update the url, back button, all right..
But I have the following problem

---

Share/Refresh:
When I refresh the page or try to share the link with someone else, it doesn’t load the site properly. You are opening only the section on that specific page. Ex.: If I want to share the link site.com.br/sobre.php it opens only the text of that page. The header, menu, footer do not appear. The css also comes disfigured.

If it is in the first load of the site, there is no problem.. But if you give refresh or share the link with friend, this problem already happens.

Note: I want to keep this type of navigation by the speed I was able to get on the site.

---

This is the code I’m using:

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a").attr("href"),
        navLink = $(".navbar li a");

    content.load(firstLink);

    navLink.on("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        var newLink = $(this).attr("href");

         History.pushState(null, null, newLink);

        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(newLink, function () {
            FB.XFBML.parse();
        });
    });

    History.Adapter.bind(window, "statechange", function() {
        $(".active").removeClass("active");
        $("a[href='" + History.getState().title + "']").addClass("active");
        content.load(document.location.href); 
    });
});

And this is my menu:

<nav class="navbar">
    <div class="container">
        <ul>
            <li><a class="active" href="/content/home.php">Inicio</a></li>
            <li><a href="/content/servicos.php">Serviços</a></li>
            <li><a href="/content/advogados.php">Advogados</a></li>
            <li><a href="/content/escritorio.php">Escritório</a></li>
            <li><a href="/content/noticias.php">Notícias</a></li>
            <li><a href="/content/contato.php">Contato</a></li>
        </ul>
    </div>
</nav>

I think that would be it. If anyone can help me, I’d really appreciate it!

Answer 1

Your PHP script for the internal parts of the site returns only the middle part of the site. So when you make a request XHR(AJAX), you get what you want, only the middle part and you play what you received within the template that came with the home, however when directly accessing the URL, you do not have the data you receive by accessing the home of the site (your template).

So when you directly access its url, it will return only the middle part.

You have two ways to solve this:

1 - In your php script you can check in headers if the request being made is XHR. Example:

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
  //retorna só o meio da pagina
}
else {
  //da um jeito de montar a página inteira com cabeçalho, rodapé, etc.
}

2 - Render the javascript page.

Most websites that use this type of navigation, are called "single page apps", translating: "Single page application" because they use the server only to send the home page and do most of the work in the client (javascript).

There are several frameworks and libraries that aim to solve this problem, among them:

Facebook project: https://facebook.github.io/react/

Google project: https://angularjs.org/

Two options that I consider a little simpler:

http://emberjs.com/

http://backbonejs.org/

Google project that is still in beta, but if your goal is learning, I recommend: https://www.polymer-project.org/0.5/

You can also try to create your own solution. That would basically have to check if the url is the home one and otherwise mount the template. The above frameworks do much more than that and are quite different from each other.

I think it is valid to learn to use any of them, because learning one will be easier to learn another case necessary.