2012年3月13日火曜日

symfonyでjQueryによるAjax。 sfDoctrinePagerに対応とか自分自身を書き換える系

JobeetでJQueryを使ったAjaxの解説があるのだけれども、状況が特殊すぎてさっぱりわからなく、
自分で応用が効かなかった。
jQueryの記事をいろいろ見てやっと望みどおりの動作になりました。
ぶっちゃけ、Web開発経験ないので本当に辛い気がする。。。

リンククリックでAjaxを走らせるには

$(document).ready(function()
{
  $('#xxx a').live("click", function()
  {
    var page = getUrlVars($(this).attr('href'))['page'];
    $('#yyy').load(
          "search",
          {page: page}
          );
    return false;
  });
});

って感じになるんじゃないでしょうか。
まず、リンクをクリックするとそもそも、リンク先に飛んじゃうので
それを殺すのにreturn falseしてやる必要がある。

loadですげ変わる部分自体が
<div id=xxx>
<a href='search?page=x'>next</a>
って感じで<div id=xxx>自体を生成しなおすので
$('#xxx a').click(function()
でやると新しくすげ替えたタグを見つけられなくて通常のリンク処理が走ってしまう。
そこで、click関数では無くlive('click')にてイベントを処理すると行けるもんですね。
さらにloadにて投げるパラメータ?page=xはクリックした<a>タグの中の
href=に書いて有るためパラメータを自力で取得する必要がある。
href自体は
$(this).attr('href')で取れるのであとはパラメータを分解出来ればいいのだけれども
ぐぐったら現在のURLを分解するgetUrlVars()っつーサンプルがあったので改造して
引数でurlをわたして分解するように改造。(どう考えてもこっちのほうが汎用性あるとおもうんだけどな。。。)

function getUrlVars($url)
{
    var vars = [], hash;
    var hashes = $url.slice($url.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
getUrlVars('http://www.jobeet.com/search?page=2')['page'];

とかするとはれて2と言う値がとれるようです。
でloadのパラメータに{page: page}とかって付け加えればOK。
この書き方はTwigでも同じなのでちょっと便利。

あとはpagerを含めてそのまんま処理すればOK。

例のaction.class.php内で

if ($request->isXmlHttpRequest())
{
  return $this->renderPartial('job/list', array(
    'pager' => $this->pager
   ));
}

とやって
searchSuccess.phpでは

<div id="yyy">
{{ 'job/list'|include_partial({pager: pager}) }}
</div>


とかyyy付けとけばそこ全体が変わると。

_listのページャ部分には
  <div id="xxx">

    <a href="<?php echo url_for('category', $category) ?>?page=1">
      <img src="/images/first.png" alt="First page" title="First page" />
    </a>
 といった感じで<div id="xxx">で囲っとけばページャだけにイベントが発生する仕組みと。

ぶっちゃけ、自分の処理はcategoryをモジュールで分けないで?category=hogeで処理するようにしているので、jobeetの処理まんまでは無いけれども、つまりは、そういった感じでやればいけるって話です。








0 件のコメント:

コメントを投稿