CakePHP2.x Ajax PostとAjax pagenationとか ITかあさん

ITかあさん

CakePHP2.x Ajax PostとAjax pagenationとか

CakePHP Ajax Postのお話

jQueryの$.ajax()と組み合わせると結構簡単に出来ます。

Ajax Post

jQuery

	$("#post_bt").click(function () {
			$.ajax({
				type: "POST",
				url: "/posts/add/",
			        data: {text : 'テキストテキスト'},
				dataType: "json",
				success: function(data) {
					location.reload();
				},
				error: function(data){
					//失敗した時の処理
			}
		});
	});

PostsController.php

    function add() {
        if ($this->request->is('post')) {
            if ($this->Post->save($this->request->data)) {
                //saveが完了した後の処理
            }
	}
    }

Ajax Pagination

AjaxPaginationもそれほど難しくありません。

PostsController.php

ポイントはRequestHandler->isAjax()のところ。
layoutもnullにしておいて、paginationの中身だけ表示されるようにします。

        $this->set('plans', $this->paginate('Plan'));
     if($this->RequestHandler->isAjax()) {
            $this->layout = null;
            $this->render();
        }

Ajaxとview

viewの中身はpaginationの中身を、普通に書けばよいです。
Ajaxもそれほど難しくなく、pagenateのリンクをjQueryのload()で指定した箇所に呼び出しています。
2回目以降にAjax Pagenateのリンクがクリックされた時に2ページ目以降の内容が入るdivのボックスを追加しているのです。

<script>
  $(function(){
  $('.more:last a').load(function(){
  // ページの読み込みが完了した後に実行するコード
  });
  $('.more:last a').click(function() {
  $(this).parent().remove();
  var url = $(this).attr("href");
  $('.posts:last').load(url);
  $(".posts").after('<div class="posts"></div>');
  return false;
  });
  $('.more:not(:has(a))').css('display','none');
  });
  </script>
  <div class="posts"></div>
  <?php echo $this->Paginator->next('もっと見る', array('class' => 'more','tag' => 'p'));?>

1ページ目だけにしか表示したくない内容があれば。

Ajaxページ読み込みするに当たって、読み込んだ際に余計なコンテンツを読み込んでしまう場合もあるかもしれません。

もしも1ページ目だけにしか表示させたくない内容があれば、以下のように書くと現在表示中のページ番号が取得出来ます。これはAjax Pagenationしていても同様に取得出来ます。

$this->Paginator->counter(‘{:page}’)
if($this->Paginator->counter('{:page}') == 1) {
}

これで1ページ目だけ表示させたい場合は対応出来ます。

初夏のJavaScript祭 in サーキュレーションビル ForPro