first of all, i'd like to say i'm still learning ajax/jquery so, sorry if any stupid mistake.
Ok, so, i was looking all around the internet to try to find a solution to what i'm trying to do. I found something here, something there but i'm struggling to put everything together. Here we go.
Objective
I want to create a website using ajax navigation. When i click on a menu, only the content div will update. Also i want the url to update, so if any user want to share that page, it will be possible. Also the possibility to go back and forward (this i think will be automatic added when using the url update).
What i have
I did the website and already have the ajax navigation. I also i have a active link working. The navigation is working fine. This is the code i'm using:
$(document).ready(function() {
var content = $('#site'),
firstLink = $(".navbar li:first-child a"),
firstLoad = firstLink.attr("href"),
navLink = $(".navbar li a");
content.load(firstLoad); //default load
navLink.on("click", function(event){
event.preventDefault();
$(".active").removeClass("active");
$(this).addClass("active");
content.load(this.href, function () {
FB.XFBML.parse(); //update facebook page plugin in each page laod
});
});
});
And this is my navigation bar:
[...rest of code...]
<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>
<div id="site"></div>
[...rest of code...]
The Problem
At the momment, i have 2 main problems, which are:
- Update the URL;
- When share a link, it loads only the content;
1- I was trying to use history.js to do it and kind of did. But everytime i click on a link, it will duplicate the code. For example, i have a url site.com/content/home.php and i click on the contact page, the url will be: site.com/content/content/contact.php and next will be site.com/content/content/content/about.phpand so on..
2- When i was trying the URL update i tried to share a link, for example, site.com/content/about.php but when i opened the new page i only got the about part of code. No header, menu, footer and other things.
What i tried
I was looking this topic and got the same problems i had before. Even with the modifications.
This is the jquery code i was using when following that topic:
$(document).ready(function() {
var content = $('#site'),
firstLink = $(".navbar li:first-child a"),
firstLoad = firstLink.attr("href"),
navLink = $(".navbar li a");
content.load(firstLoad); //default load
navLink.on("click", function(event){
event.preventDefault();
event.stopImmediatePropagation();
var newLink = $(this).attr("href");
History.pushState(null, newLink, 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);
});
});
So, does anyone knows what i'm doing wrong? Is there a best way to achieve what i want? Or how to do it?
Hope someone can help me. Thanks!
