I'm trying to convert my site to a full html5 ajax website with pushstate and popstate controlled locations.
My current file structure is as follows:
common/header.php
common/footer.php
index.php
page1.php
page2.php
page3.php
page4.php
page5.php
Ok, so all files currently include the "header.php" and "footer.php" files in the "common" folder.
A basic version of my header and footer files look like this:
Header.php (including pushState/popState/ajax script):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
$(function() {
$('a').on('click', function(e) {
var href = $(this).attr("href");
loadContent(href);
history.pushState({}, '', href);
e.preventDefault();
});
$(window).on('popstate', function() {
console.log("pathname: "+location.pathname);
loadContent(location.pathname);
});
});
function loadContent(url) {
$('#wrapper').load(url);
}
</script>
<title>REZIINE</title>
</head>
<body>
<div id="wrapper-outer">
<div id="wrapper">
Footer.php:
</div>
</div>
</body>
</html>
Now, if I leave the header and footer includes in all the files then when i navigate to any of their URLs using a fresh HTTP request the page works fine, but when i try to navigate using an anchor link, some css styled references the parent div instead of the page and it generally just doesnt display perfectly.
On the other hand, if I don't include the header and footer files in pages other than the index page they load fine when navigating to them starting at the index page, but if I try to use a fresh HTTP request pointing directly at any file URL other than the index.php file than just the raw page content is displayed because the header file containing all the scripts and css files isn't included.
I need to know exactly how a site like this should be structured so that if I go to mysiteurl.com then the index page loads fine, and if i navigate directly to another page using a fresh http request, such as mysiteurl.com/page3.php that loads fine too, and all navigation works correctly.
Thanks in advance to anyone whom lays this out for me.
Use jquery-pjax with the fragment option.
Your script in
header.phpwill be something like