ボタンが押されたらページ遷移せずにデータをテーブルに追加するor持ってくるなど。
CakePHPにはAjaxヘルパーなるものが存在しているが、どうやら古いものなうえ、
どこかからダウンロードしてこないと使えないようだ。
jQueryを使えば問題なく動作するようなので、jQueryを使用する。
参考サイト
上の参考サイトが分かりやすいがCakePHPを使っていないので、今回は上のサイトの例を
下のサイトを参考にしながらCakePHPに落とし込んで行く。
なので細かい部分は参考サイトを参考に。
テーブルとモデルを作成する
Ajaxで操作するテーブルを作成。
/*---------------------------------------------------------------------------*/
CREATE TABLE `Telephones` (
`id` INT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 64 ) NOT NULL ,
`phone` VARCHAR( 16 ) NOT NULL ,
PRIMARY KEY ( `id` )
);
/*---------------------------------------------------------------------------*/
モデルをDirectoryで作成するとCakePHPのデフォルトのクラスと被るので名前だけ変える。
変えた名前に対応したモデルを作って適当なデータを挿入すればテーブル周りは完了。
jQueryを使用したviewファイルを作成する
jQueryでMySQLに接続。ヒアドキュメントの存在を知ってたけど初めて使ったのでメモ代わりに。
/*---------------------------------------------------------------------------*/
<?php
echo $this->Html->script("jquery-1.10.2.js", array('inline' => false));
$this->Html->scriptStart(array('inline' => false));
echo <<<EOT
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("/hoge/fuga/find", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
EOT;
$this->Html->scriptEnd();
/*---------------------------------------------------------------------------*/
普通のphpファイルで操作していた要素をCakePHPのviewファイルに合わせて
書き換えるだけなので難しいことは無いはず。
コントローラにAjaxからアクセスする操作を記述する
上の記述どおりだとFugaControllerにfindメソッドを記述する。
/*---------------------------------------------------------------------------*/
public function find() {
$this->layout = "ajax";
if($this->RequestHandler->isAjax()) {
$term = strip_tags(substr($this->request->data("search_term"), 0, 100));
$sql = "select name,phone
from directory
where name like '%$term%'
or phone like '%$term%'
order by name asc";
$result = $this->Telephone->query($sql);
$string = "";
foreach($result as $row) {
$string .= "<b>".$row["Telephone"]["name"]."</b> - ";
$string .= $row["Telephone"]["phone"]."</a>";
$string .= "<br/>\n";
}
if($string === "") {
$string = "No matches!";
}
$this->set("data", $string);
}
}
/*---------------------------------------------------------------------------*/
これもほぼ参考サイト丸コピ。レイアウトの変更やAjaxからの送信かを確認しているくらい。
ここまでできたら一度ちゃんと動くかを普通にアクセスして確かめたほうがいいと思う。
条件がよくわからないが、エラーがあると普通にエラーメッセージを表示してくれるときと、
500エラーになるときで動作が分かれることがある
最初に普通にエラーメッセージが出てきたので、500エラーが出ている理由が
コントローラ側でエラーを吐いているのだと気づかずにしばらく積んだ。
最後にビューのポストに値を入力して動けば完了。
0 件のコメント:
コメントを投稿