jquery.pjax.js (defunkt 版)

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-02-11 (水) 15:20:23

AjaxpushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
 

URL 変更機能

別ページの URL へ切り替える。
 

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
 

インストール

GitHub:defunkt/jquery-pjax から DL して配置。

falsandtru 版 と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
 

使い方
ライブラリの読込
  1. <script src="jquery.min.js"></script>
  2. <script src="jquery.pjax.defunkt.js"></script>

 

ファイルの配置
index.html
  1. <body>
  2.     <div>pjax before.</div>
  3.  
  4.     <div id="container">
  5.         <div><button>pjax before.</button></div>
  6.     </div>
  7.  
  8.     <script type="text/javascript">
  9.     $( document ).ready( function() {
  10.  
  11.         $( 'button' ).click( function() {
  12.  
  13.             $.pjax({
  14.                 url: 'pjax_test.php';
  15.                 container: '#container',
  16.                 fragment:  '#container_new'
  17.             });
  18.         });
  19.     });
  20.     </script>
  21. </body>

 

pjax_test.html
  1. <body>
  2.     <div>pjax after.</div>
  3.  
  4.     <div id="container_new">
  5.  
  6.         <div>pjax after. Good Job!</div>
  7.  
  8.     </div>
  9. </body>

 

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
 

連続

ところが、1度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
 
そこで1枚のページで差し替えるタイプにしたら、連続して動作した。

index.php
  1. <body>
  2.     <div id="container">
  3.         <div id="test">
  4.             <button id="hoge_1">pjax</button>
  5.             <button id="hoge_2"><?php echo ( empty( $_GET&#91;'value'&#93; ) ) ? 1 : $_GET&#91;'value'&#93; + 1; ?></button>
  6.         </div>
  7.     </div>
  8.  
  9.     <script type="text/javascript">
  10.     $( document ).ready( function() {
  11.         $( 'button' ).click( function() {
  12.             $.pjax({
  13.                 url: 'index.php?value=' + $( '#hoge_2' ).text(),
  14.                 container: '#container',
  15.                 fragment:  '#container_new'
  16.             });
  17.         });
  18.     });
  19.     </script>
  20. </body>

ただし、

  1. container: '#container',
  2. fragment: '#container'

ここを同じ名前にすると1回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな~。。。
 
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決?

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

  1. container: '#container',

これでちゃんと動く。
 

オプション、イベント

オプションイベント を見てやってみましょう。
 

開始時処理
  1.  
  2. $(document).on('pjax:send', function(e) {
  3.     $('body').append("<div id='loading'>処理中</div>");
  4. });

 

終了時処理
  1. $(document).on('pjax:complete', function(e,data) {
  2.     $("#loading").remove();
  3. });

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に!
 

フォームの値の受け渡し

フォームの値の受け渡し 参照。
 

注意

ブラウザバックとかの挙動への対処が必要ね~。
 

参考サイト

RakSul:はじめての「pjax」
Qiita:pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix:defunkt版pjaxの説明

jQuery,Library & PlugIn & AddIn | 2015-02-11 (水) 15:20:23 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment