シェアする

  • このエントリーをはてなブックマークに追加

[CakePHP][jQuery]Ajaxで論理値を変更(自分用メモ)

例えば、「入金済み」「未入金」みたいなフラグがあったとして、
jQueryを使って画面変遷無しで変更する方法のメモ。
※あくまで自分用のメモです。読んで頂いた方に理解できるように書く自信がありません。ごめんなさい。

やりたいこと

cs_20091008_1

変更操作する一覧形式のビュー

【サンプル】
一覧形式のビューの一番上に下記コードを記述
一覧表の入金ボタン(入切)には、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]

  1. 正しいことかどうかわからないけど []
  2. 僕もわかってないので説明できないです>< []

シェアする

  • このエントリーをはてなブックマークに追加

フォローする