chrome と firefox で pjax の例を試しました。サンプル コードを取得して自分のアプリに配置しましたが、それでもページ全体がリロードされます。AJAX リクエストが発生すると、#main div を更新せずにページが移動します
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="http://localhost:8888/jul/js/jquery.pjax.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// $('a[data-pjax]').pjax();
// })
// $(document).ready(function(){
// $('a').pjax({
// container: '#main'
// })
$('document').ready(function(){
$('ul a').pjax('#main')
});
</script>
</head>
<body>
11:59:36 <div id="main">
<div class='loader' style='display:none'><img src='http://localhost:8888/jul/imgs/spinner.gif'></div><ul>
<li><a data-pjax='#main' href="/jul/stats/pjax_stats/index/">Index</a></li>
<li><a data-pjax='#main' href="/jul/stats/pjax_stats/total_posts/">total_posts</a></li>
<li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/index">Index</a></li>
<li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/total_posts">total_posts</a></li>
<li><a href="http://localhost:8888/jul/stats/pjax_stats/total_graph">total_graph</a></li>
<li><a href="http://localhost:8888/jul/stats/pjax_stats/twitter_graph">twitter_graph</a></li>
<li><a href="http://localhost:8888/jul/stats/pjax_stats/facebook_graph">facebook_graph</a></li>
</ul>index files
</div>
</body>
</html>
私は pjax を呼び出すために複数の方法を試しました。Ajax/GET は、firebug コンソールで正常に返されるようです。これは、pjax 応答を生成する私の php の例です。
public function total_posts(){
// print_r($_SERVER);
if (!isset($_SERVER["X_PJAX"])) {
$this->load->view('stats/pjax_stats/header');
$this->load->view('stats/pjax_stats/links');
}else{
echo "pjax";//add in for debug
}
echo "total posts";
if (!isset($_SERVER['X-PJAX'])) {
$this->load->view('stats/pjax_stats/footer');
}
}
バグ?
最新バージョンでは、Ajax リクエストが行われる URL の最後に追加される変数が _pjax=true ではなく _pjax=container になるというバグがあるようです。