しるてく

技術的な話をします

jqery-pjaxで複数のコンテンツを書き換える

javascript jQuery

タイトルのようなことをやるにはどうしたら良いかという話。
結論から言うと、書き換えたいデータを全部返して、pjax:successで突っ込んであげれば良いらしい。

前提

<html>
  <head></head>
  <body>
    <div id="header">へっだー</div>
    <div id="main">めいん</div>
    <div id="sub">さぶ</div>
    <div id="footer">ふったー</div>
    <div id="hoge">おまけ</div>
  </body>
</html>

というページのとき、pjaxで#mainと#hogeを書き換えたい！みたいな話。

返すデータ

<div id="main">めいん2</div>
<div id="hoge">おまけ2</div>

最低これだけ。他にも色々返しても良い。ただし、htmlタグが含まれると普通の遷移をしてしまうので注意。

pjax

$(document).pjax('a', '#main', { 'fragment': '#main' });

とやると、返ってきたデータをfilter()で良い感じに欲しいデータだけ抜き出して突っ込んでくれる。fragmentがないと、

<html>
  <head></head>
  <body>
    <div id="header">へっだー</div>
    <div id="main">
      <div id="main">めいん2</div>
      <div id="hoge">おまけ2</div>
    </div>
    <div id="sub">さぶ</div>
    <div id="footer">ふったー</div>
    <div id="hoge">おまけ</div>
  </body>
</html>

のように返ってきたデータをすべて#mainに突っ込んでしまうので注意。

pjax:success

それで、#hogeのほうはどうするかというと、pjaxの成功時にごにょごにょしてあげる。

$(document).on('pjax:success', function(e, data) {
  $('#hoge').html($(data).filter('#hoge'));
});

dataには返ってきたデータがはいっているので、filter()で欲しいデータだけ抜き出してhtml()で突っ込む。

おわり

とりあえず、動いたけどこれで正解なのかなという不安はあるので、もっと良いやり方とかあれば教えてください。