例えば、「入金済み」「未入金」みたいなフラグがあったとして、
jQueryを使って画面変遷無しで変更する方法のメモ。
※あくまで自分用のメモです。読んで頂いた方に理解できるように書く自信がありません。ごめんなさい。
やりたいこと
変更操作する一覧形式のビュー
【サンプル】
一覧形式のビューの一番上に下記コードを記述
一覧表の入金ボタン（入切）には、onclickでchangePayFlag(id);return false;を記述 *1
<?PHP
echo $javascript->codeBlock(
'
// 入金ステータス変更
function changePayFlag(id) {
$.ajax({
url: "'.$html->url("change_pay_flag").'", // ここで変更処理するアクションを指定（$html->urlを使用）
type: "POST", // メソッドを指定（GETでもいい）
data: {id:id}, // POSTの場合はデータをセット（コントローラでの受け取り方にコツあり）
dataType: "html",
timeout: 10000,
error: function(XMLHttpRequest, textStatus, errorThrown){
// 変更が失敗したときの処理
alert("入金ステータスを変更できませんでした");
},
success: function (data) {
// 変更が成功したときの処理
var info = eval("("+data+")");
imgSrc = $("#paidImg"+id).attr("src");
if (info.paid == "paid") {
imgSrc = "'.$html->url("/img/icons/money_add.gif").'";
imgAlt = "入金済み";
} else {
imgSrc = "'.$html->url("/img/icons/coins_delete.gif").'";
imgAlt = "未入金";
}
$("#paidImg"+id).attr("src", imgSrc).attr("alt", imgAlt); // 対象の画像とAltを差し替え
}
});
}
',
array("inline" => false)
);
?>
入金フラグ変更処理
【サンプル】
// 入金状態変更
function change_pay_flag() {
$this->layout = "ajax";
Configure::write("debug", 0);
$params = $this->params['form']; // ajaxでPOSTしたデータは$this->params['form']で取得
if (!isset($params['id'])) {
$this->flash("引数の指定がありません", "index", 2);
return;
}
$order = $this->Order->read(null, $params['id']);
if ($order['Order']['pay_flag'] > 0) {
// 入金済みだった場合は未入金に
$changeFlag = "0";
$results['paid'] = "unpaid";
} else {
// 未入金だった場合は入金済みに
$changeFlag = "1";
$results['paid'] = "paid";
}
$this->Order->id = $order['Order']['id'];
$this->Order->saveField("pay_flag", $changeFlag);
$this->set(compact("results")); // ここでセットしたresultsは$.ajaxのコールバックに使用する
}
入金フラグ変更処理のビュー
【サンプル】
<?PHP echo $javascript->object($results); // 配列をJSON形式に変換 ?>
補足
一覧形式のビューに追加したjavascriptコードの$.ajax({success:~~});に書いたvar info = eval(“(“+data+”)”);部分は、入金フラグ変更処理のビューで取得したJSON形式のデータをjavascriptの変数に展開？するために書いています。*2
