【cakePHP3】「もっと見る」機能を実装したい

現在PHP,CakePHP3,jQuery,HTML（ｃｔｐ）を使って
投稿の「もっと見る」機能を実装しようとしています。

↑実際は「投稿内容」でもう少し複雑です。

「もっと見る」ボタンを押すと、投稿の表示を非同期で増やしていく。というよくある仕様です。
Twitterやfacebookの画面下にスクロールしたとき、投稿がさらに表示されるようなのと同じです。

そこで以下の実装方法を実現するにはどのようにすればいいかお力添えいただければと思います。

今やろうとしている方法が以下です。

１．「もっと見る」ボタン押下時にjQueryでAjaxを使い、Contoroller側を呼びだし、表示するデータを取得する。
２．そのデータを表示する場所のタグを生成する。
３．その生成したタグにデータを詰めて表示する。

2.のところをappendメソッドを使ってやろうとすると気が遠くなるほど多くのタグを生成せねばなりません。
なのでできれば**「Templateのelementファイルに生成するタグを書いてしまってそれを呼び出す形でタグ生成を実現したい」**と思っています。

elementの呼び出し方に関しては
「echo $this->element( 'element名' );」
で呼び出せるのは知っています。
http://realid-inc.com/column/2014/07/04-164752.html

それをうまくAjaxと絡ませて実現する方法や具体的な書き方を教えていただければ幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

elementを使用しないので要望と少々違うかもしれませんが、私なりのやり方を載せます。

javascript
1$.ajax(
2    type : "POST",
3    url: "<?php echo $this->html->url(array('controller' => 'sample', 'action' => 'sampleAction')); ?>",
4    dataType : "text"
5}).done(function(data, textStatus, jqXHR){
6    $("hoge").append(data);
7})

php
1public function sampleAction($var){
2    /**
3     * 画面の描画に必要な情報を取得する処理
4     */
5    $this->render("samaple"); //ここで追加する要素のctpを呼び出す。
6}

このようにすると、htmlが返ってきますので、それをappendするようにしています。

追記

例えば、index.ctpに次のようにあるとして

html
1<ul id="hoge">
2    <li>トマト</li>
3    <li>キャベツ</li>
4    <li>もやし</li>
5</ul>
6<button type="button" id="more_list">もっと見る</button>

「もっと見る」ボタンのクリックイベントでAjaxを行うとします。

また、sampleAction, sample.ctpを次のようにすると
sampleAction

php
1public function sampleAction($var){
2    /**
3     * 画面の描画に必要な情報を取得する処理
4     */
5    $this->set('itemList', $itemList); // ctpに渡す変数をセット
6    $this->render("samaple"); //ここで追加する要素のctpを呼び出す。
7}
8

sample.ctp

PHP
1<?php foreach($itemList as $item): ?>
2    <li><?php echo h($item); ?></li>
3<?php endforeach; ?>

結果として次のようなhtmlが返ってきます。

html
1<li>にんじん</li>
2<li>だいこん</li>

この返ってきたhtmlを追加したい場所にappendするということになります。

投稿2016/03/16 00:31

編集2016/03/16 01:12

orange0190

総合スコア1698

k499778

2016/03/16 00:42 編集

回答ありがとうございます。 ajaxでは受け取った値(html)をsampleフォルダのindex.ctp？に追加するという処理をしているということでしょうか？

orange0190

2016/03/16 01:11

追記しました。大体はその通りですが、正確にはindex.ctpの追加表示したい箇所に追加するというものです。

k499778

2016/03/16 03:16

詳しく記述いただきありがとうございます。試してみます！

k499778

2016/03/16 10:09

ShunsukeIzuiさん本当にありがとうございました！理想としていた実装をすることができました。本当に感謝しています。ありがとうございます。

行動規範の内容に同意します

安心してください。非同期でない通信は、ありません。
非同期を頑張って同期にする人は、たくさん例がありますが、
よって、普通に通信をすれば、よいのです。

通信のサンプルはたくさんあります。
お勧めは、jsonですかね。
http://alphasis.info/2011/11/jquery-gyakubiki-jquery-post-json/

投稿2016/03/16 00:04

退会済みユーザー

総合スコア0

退会済みユーザー

2016/03/16 00:08

これですね。具体的なもの http://gimmicklog.main.jp/demo/more-button.html

k499778

2016/03/16 00:14 編集

回答ありがとうございます。少し意図と違う伝わり方をしてしまいました。実際、ajaxを使ってコントローラ側でwebAPIを使って取得したデータをjs側で受け取ることはできています。dataType:jsonにして。なのであとはそのデータを表示するときに、 Templateのelmentファイルを使ってうまく表示したいのですが、その時のAjaxで受け取ったデータをelmentファイルに表示させるのをどうしたらいいかと伝えたかったのです。もしその方法やアドバイスをご存知であれば教えていただけるとありがたいです。

退会済みユーザー

2016/03/16 00:23

それは、無理ですね。 JavaScriptで出来るのは、OUPUTされたHTMLに対してなので、完全にブラウザのみで、完結するのでサーバ側のCakePHPは、一切呼ばれません。 jsonをやめて、CakePHPのelmentファイルで、HTMLを生成して返せばよいと思います。

退会済みユーザー

2016/03/16 00:25

UMLのシーケンス図を書いて、ブラウザで処理するもの、サーバで処理するもの整理すると理解が深まるかもしれません。

k499778

2016/03/16 00:28

terionさん、回答ありがとうございます。それは受け取ったデータをelmentファイルに表示するのが無理ということでしょうか？ajaxでcakephpのコントローラ側からデータを受け取ることが無理ということでしょうか？後者に関してはできています。前者が無理ということならajaxは諦めた方がいいということでしょうか？そうすると非同期で処理するのが難しくなりそうな気がします。いろいろ質問をぶつけてしまい申し訳有りません>_<

退会済みユーザー

2016/03/16 00:32

ajaxでcakephpのコントローラ側からデータを受け取ればよいわけで、 jsonをブラウザが受け取って、また、CakePHPに JSONをPOSTすれば「elmentファイルに表示する」ことが出来ます。

k499778

2016/03/16 00:36

受け取ったデータをもう一度コントローラ側にPOSTするということですね。なるほど。少しそのやり方でチャレンジしてみます！ありがとうございます。

退会済みユーザー

2016/03/16 00:37

徹夜作業で疲れいるようですね、少し休んだ方が。。

k499778

2016/03/16 03:20 編集

認識が間違っているということでしょうか？単にねぎらいの言葉をかけてくださったのでしょうか？前者ならご指摘いただけると嬉しいです>_<