jquery - WebSite Ajax navigation doesn't work when refreshing / share link -
i'm building website ajax navigation, whole site doesn't need load everytime user wants see page. home, about, news, contact, etc...
i did built it, url
refresh, button, ok.
have following problem.
compartilhar/refresh:
when refresh page or share link someone, website doesn't load properly. loads specifc portion of site. example: if share link mysite.com/about.php
load text of page no header, footer, , other common element main layout. no css
.
same thing happens if refresh page when i'm in other page.
i tried follow tutorial here doesn't load anything. give me blank space.
the code have below working, problem i've described above.
jquery code:
$(document).ready(function() { var content = $('#site'), firstlink = $(".navbar li:first-child a").attr("href"), navlink = $(".navbar li a"); content.load(firstlink); //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); }); });
website structure code:
<head> <script type="text/javascript" src="js/jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <header> <!-- more code in here --> </header> <nav class="navbar"> <div class="container"> <ul> <li><a class="active" href="/content/home.php">home</a></li> <li><a href="/content/services.php">services</a></li> <li><a href="/content/people.php">people</a></li> <li><a href="/content/about.php">about us</a></li> <li><a href="/content/news.php">news</a></li> <li><a href="/content/contact.php">contact</a></li> </ul> </div> </nav> <div id="site"></div> <footer> <!-- more code in here --> </footer> <script type="text/javascript" src="js/history.js"></script> <script type="text/javascript" src="js/scripts.js"></script> </body>
cookie way:
- create session expire cookie.
- when request page , have cookie send portion of page.
but
- if when request page , haven't cookie. set session cookie , send index page + content.
example:
1. request services.php , have cookie x. server send services.php
2. request services.php , haven't cookie x. server send index.php , in index.php can make , include of services.php like:
//some html if (!$_cookie["some_cookie_name"]) { include_once("the_page.php"); } //more html
3. if request /
server send index.php
if include parameter of url take care can type , that.
javascript (jquery) way:
- step 1. check in php if call normal or ajax (http://davidwalsh.name/detect-ajax). can in multiple ways.
- if call ajax. serve portion of page.
- if call not ajax. serve index.php
- step 2. include in index.php javascript check contents of url , check contents of specific div like...:
- if url services.php , content of div
#yourdiv
empty --> ajax call services.php. - if url
/
or content of div#yourdiv
isn't empty --> nothing.
- if url services.php , content of div
javascript (jquery) + cookie way:
- step 1. check in php if call normal or ajax (http://davidwalsh.name/detect-ajax). can in multiple ways.
- if call ajax. serve portion of page.
- if call not ajax. serve index.php , set cookie name desired page (ex: services.php).
- step 2. include in index.php javascript check if cookie created (or not) before exist...:
- if cookie exist --> ajax call url in cookie value & delete cookie.
- if cookie not exist --> nothing.
hope helps
Comments
Post a Comment