Site navigation without reload using ajax does not work correctly

Question

Site navigation without reload using ajax does not work correctly

Navigation

#1 by (1 votes)

0

All right?

Next, I'm making a site with AJAX navigation so you do not have to load the site every time you go to a page. Home, news, contact, etc ..

I managed to make the site, update the url, return button, everything right ..
However I have the following problem

Share / Refresh:
When I refresh the page or try to share the link with someone else, it does not load the site correctly. You are only opening the section of that particular page. Eg: If I want to share the site.com.br/sobre.php link it only opens the text of that page. The header, menu, footer do not appear. css also comes unconfigured.

If it is the first load of the site, it does not have any 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 got 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 would appreciate it!

jquery ajax

asked by anonymous 22.04.2015 / 15:30

1 answer

Alternatives to center the img tag Comment for each post id without multiplication of it

score 1 · Accepted Answer

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

Then when you directly access his url, it will return only the middle part.

You have two ways to resolve this:

1 - In your php script you can check in the 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 page in javascript.

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

There are a number of frameworks and libraries that address this problem, including:

Facebook Project: link

Google Project: link

Two options that I consider a little simpler:

link

Google project that is in beta yet, but if your goal is learning, I recommend: link

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

I think it's worth learning to use any of them, because learning one will make it easier to learn another if necessary.