I'm testing jquery.pjax.js and noticed a problem.
In my minimum test project, strange behavior like below happens:
- Access to index.php in fireflx
- Click a pjax link: location bar and page contents are changed
- Click Firefox's back button: location bar is changed but contents remain
This behavior doesn't happen in GoogleChrome.
I want to know how to solve this.
My test project is:
http://karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip
index.php
<?php
$page = 1;
if (isset($_GET['page'])) {
$page = $_GET['page'];
}
$isPjax = false;
if (!empty($_SERVER['HTTP_X_PJAX'])) {
$isPjax = true;
}
if (!$isPjax):
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>page<?php echo $page; ?></title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
// link
$(document).pjax('a.pjax', '#main');
// form
$(document).on('submit', 'form', function(event) {
$.pjax.submit(event, '#main')
})
});
</script>
</head>
<body>
<h1>pjax test</h1>
<ul class="links">
<li><a href="?page=1" class="pjax">page1</a></li>
<li><a href="?page=2" class="pjax">page2</a></li>
<li><a href="?page=3" class="pjax">page3</a></li>
</ul>
<form>
Page：<input name="page" type="text" value="1">
<input type="submit">
</form>
<div id="main" style="border: 3px double gray">
<?php endif; ?>
<?php include("page/{$page}.html") ?>
<?php if (!$isPjax): ?>
</div>
</body>
</html>
<?php endif; ?>
page/1.html
page1 contents
page/2.html
page2 contents
page/3.html
page3 contents
js/jquery-1.9.1.min.js
js/jquery.pjax.js
