[CakePHP]もっと見るボタン押下時にajaxでElementを取得してリストに追加する方法

CakePHP

2021.06.18

はじめに
結論
検証環境
コード
参考
1. 共有:

はじめに

この記事では、フロント側からajaxでControllerを呼び出し、その中で読み込んだElementをリターンしてhtmlに追加表示する方法を紹介しています。

結論

ポイントとしては2点になります。

ajaxのdataTypeをhtmlにする
Controllerのreturnを$this->render('Element Path');にする

検証環境

端末	バージョン
Mac	Big Sur 11.2.3
CakePHP	3.8.12
Docker
Nginx

コード

htmlにはリストと「もっと見る」ボタンがあります。
ボタンを押すとajax経由でサーバサイドのControllerを非同期で呼びだします。
Controllerからreturnされたhtml(Element)をulタグに追加表示します。

<!doctype html>
<html lang="ja">
<head>
</head>
<body>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
  <input type="submit" value="もっと見る">
</body>
</html>

Elementの内容としてはulタグに追加するliタグがあります。

<li>リスト3</li>

結論にも記載したように、dataTypeをhtmlにしています。

<script>
$(function(){
	$("input").on("click", function(){
		$.ajax({
			type : "POST",
			url : "Server side url",
			dataType : "html"
		}).done(function(html) {
		  // サーバから送られたElement(html)を
		  // ulタグに追加表示する
			$('ul').append(html);
		}).fail(function(xhr, status, error) {
			console.log(xhr.responseText);
		});
	});
});
</script>

Controller側のポイントとしては$this->render('/element/Element name');でElementをreturnしているところです。ajaxのdataTypeをhtmlとしているので、json_encodeではないので注意ください。

	public function loadAddingLegacyPosts(){
		if(! $this->request->is("ajax")) $this->redirect("/");
		$this->layout = false;
		$this->autoRender = false;
		$this->viewBuilder()->setLayout(false);

		$this->set(compact('Elementにパラメターも渡せる'));
		$this->render('/element/Element name');
	}