初めての[CakePHP2.x]での開発、そして挫折するまで日記～その7 連携するプルダウンの表示を変更する（ajaxを試してみる）

徐々に進んでいるCakePHP

感想としては

一から書くよりは、やはり早い感じがする。

ただ、ルールに沿うのがなかなか難しいです。

連携するプルダウンメニューを作りたかったんですが、

普通にはうまくできなかったので

今回は苦手な・・・

本当に苦手なajaxを試してみました。

連携するプルダウンの表示を変更する

完成イメージは営業所ごとに価格を決めるので

「会社名」を選ぶと連動して「営業所名」が出るようにする、

というイメージです。

会社 Companyモデル
営業所　Brunchモデル
価格 Priceモデル

このモデルをアソシエーションしてjQueryファイルを読み込んでいる状態で作業します。

PricesControllerを作成

※表示に必要な箇所だけ載せています。

<?php
class PricesController extends AppController {
	public $helpers = array('Html', 'Form', 'Session', 'Js' => array('Jquery'));
	public $components = array('RequestHandler');

	//モデルを追加
	public $uses = array('Company', 'Brunch', 'Price');

	//追加
	public function add($id = null) {
                //省略

		$this->set('company_select',$this->Company->find('list',array('fields'=>array('id', 'company_name'))));
		$this->set('brunch_select',$this->Brunch->find('list',array('fields'=>array('id', 'brunch_name'))));

	}

	//営業所の表示を切り替える
	public function ajax_brunches() {
                //ajax送信でないときはアクセスできないようにする
		if (!$this->request->is('ajax')) {
			$this->redirect(array('controller' => 'prices', 'action'=>'index'));
		}

		$this->set('brunch_select',$this->Brunch->find('list',array(
				'conditions' => array('company_id' => $this->params['url']['data']['Price']['company_id']),
				'fields' => array('id', 'brunch_name')
				)
			)
		);
	}

}

切り替わるリストのajax_brunch.ctpを作成

<?php foreach($brunch_select as $key => $val) : ?>
<option value="<?php echo $key; ?>"><?php echo $val; ?></option>
<?php endforeach; ?>

add.ctpファイルを作成

<?php
// 営業所切り替えのJS
$this->Js->get('#PriceCompanyId')->event(
	'change',
	$this->Js->request(
		array('controller'=>'prices','action'=>'ajax_brunches?'),//url
		array('update' => '#PriceBrunchId', 'dataExpression' => true, 'data' => '$("#PriceCompanyId").serialize()')
	)
);
echo $this->Js->writeBuffer();
?>

<h2>add</h2>
<?php echo $this->Form->create('Price'); ?>
<table>
	<tr>
		<th>会社名</th>
		<td><?php echo $this->Form->input('company_id',array('label' => false, 'empty'=>'選んでください', 'type' => 'select', 'options' => $company_select)); ?></td>
	</tr>
	<tr>
		<th>営業所名</th>
		<td>
			<?php echo $this->Form->input('brunch_id',array('label' => false, 'empty'=>'選んでください', 'type' => 'select')); ?>
		</td>
	</tr>
	<tr>
		<th>価格</th>
		<td><?php echo $this->Form->input('discount', array('label' => false)); ?>円</td>
	</tr>
</table>
<?php  echo $this->Form->end('登録する')?>

これでできました！

今回、ChromeやFirefoxでは最初うまくいったのですが、

肝心のIEでできなくてかなり悩みました。

原因はIEでは、XMLHTTP通信（GET限定）を行ったときにキャッシュが発生するそうで、

こういうキャッシュ系の時は ? にして、? 以下は apache が無視する、ってルールを使うそうです。

なので、

ビューのが元々

'action'=>'ajax_brunches'

だったのを

'action'=>'ajax_brunches?'

にしたところ、IEでも無事動きました。

それにしても、IE恐るべしですね。

<追記>
———————————————
後日、「？」を取っても普通に動きました。

たんなるキャッシュの問題だったのか、

そもそも、何か仕様の問題だったのかわかりませんが

無くても動きました。

もしうまく動かない場合は試してみてください。
——————————————–

今回ajaxを使ってなんとかできたので

今後も連動させるときは活用していきたいと思います。

今回かなりお世話になったサイトです。

[cakephp]連携しているプルダウンの表示を変更する（jQuery使用）

$.ajax()がIEでうまく動かない

3つ連携するセレクトボックスも作りました！

初めての[CakePHP2.x]での開発、そして挫折するまで日記～その31 Ajaxで3つ連携するセレクトボックスを作る