Ajax と pushState を組み合わせた技術らしい。
【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能
とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
URL 変更機能
別ページの URL へ切り替える。
効能
ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
インストール
GitHub：defunkt/jquery-pjax から DL して配置。
falsandtru 版 と呼ばれる別バージョンもあるそうなので
jquery.pjax.defunkt.js
とリネームして配置。
使い方
ライブラリの読込
- <script src="jquery.min.js"></script>
- <script src="jquery.pjax.defunkt.js"></script>
ファイルの配置
index.html
- <body>
- <div>pjax before.</div>
- <div id="container">
- <div><button>pjax before.</button></div>
- </div>
- <script type="text/javascript">
- $( document ).ready( function() {
- $( 'button' ).click( function() {
- $.pjax({
- url: 'pjax_test.php';
- container: '#container',
- fragment: '#container_new'
- });
- });
- });
- </script>
- </body>
pjax_test.html
- <body>
- <div>pjax after.</div>
- <div id="container_new">
- <div>pjax after. Good Job!</div>
- </div>
- </body>
結果
これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
連続
ところが、１度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
そこで１枚のページで差し替えるタイプにしたら、連続して動作した。
index.php
- <body>
- <div id="container">
- <div id="test">
- <button id="hoge_1">pjax</button>
- <button id="hoge_2"><?php echo ( empty( $_GET['value'] ) ) ? 1 : $_GET['value'] + 1; ?></button>
- </div>
- </div>
- <script type="text/javascript">
- $( document ).ready( function() {
- $( 'button' ).click( function() {
- $.pjax({
- url: 'index.php?value=' + $( '#hoge_2' ).text(),
- container: '#container',
- fragment: '#container_new'
- });
- });
- });
- </script>
- </body>
ただし、
- container: '#container',
- fragment: '#container'
ここを同じ名前にすると１回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな～。。。
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯
解決？
やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。
- container: '#container',
これでちゃんと動く。
オプション、イベント
開始時処理
- $(document).on('pjax:send', function(e) {
- $('body').append("<div id='loading'>処理中</div>");
- });
終了時処理
- $(document).on('pjax:complete', function(e,data) {
- $("#loading").remove();
- });
これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に！
フォームの値の受け渡し
フォームの値の受け渡し 参照。
注意
ブラウザバックとかの挙動への対処が必要ね～。
参考サイト
RakSul：はじめての「pjax」
Qiita：pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix：defunkt版pjaxの説明
