スポンサードリンク

以前、Ajaxで連携するセレクトボックスを作ったのですが、
今度は3つ連携させたいことがあったので
今回はその3つ連携するセレクトボックスを作ってみました。
スポンサードリンク
Ajaxのセレクトボックスを3つ用意する
以前作成したセレクトボックスを同じように作成して
セレクトボックスを3つ用意します。
作成のは以前の記事の下記を参考
初めての[CakePHP2.x]での開発、そして挫折するまで日記~その7 連携するプルダウンの表示を変更する(ajaxを試してみる)
今回の完成イメージは「会社名」を選ぶと連動して「営業所名」そして「担当者」が出るようにする、
前回のものに一つ追加したと思って下さい。
というイメージです。
会社 Companyモデル
営業所 Brunchモデル
担当者 Employeeモデル
価格 Pricesモデル
このモデルをアソシエーションしてjQueryファイルを読み込んでいる状態で作業します。
PricesController.phpの作成
<?php class PricesController extends AppController { public $helpers = array('Html', 'Form', 'Session', 'Js' => array('Jquery')); //Ajaxのために必要 public $components = array('RequestHandler'); //モデルを追加 public $uses = array('Company', 'Brunch', 'Employee'); //追加 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')))); $this->set('employee_select',$this->Employee->find('list',array('fields'=>array('id', 'employee_name')))); } //営業所の表示を切り替える public function ajax_brunches() { //ajax送信でないときはアクセスできないようにする if (!$this->request->is('ajax')) { $this->redirect(array('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') ) ) ); } //担当者の表示を切り替える public function ajax_employees() { //ajax送信でないときはアクセスできないようにする if (!$this->request->is('ajax')) { $this->redirect(array('action'=>'index')); } $this->set('employee_select',$this->Employee->find('list',array( 'conditions' => array('company_id' => $this->params['url']['data']['Price']['brunch_id']), 'fields' => array('id', 'employee_name') ) ) ); } }
コントローラーは前回のものとほぼ一緒です。
Ajaxでビューに読み込む値とAjaxで処理するアクションを用意します。
スポンサードリンク
Ajaxで読み込むビューを作成
ajax_brunch.ctpの作成
<?php foreach($brunch_select as $key => $val) : ?> <option value="<?php echo $key; ?>"><?php echo $val; ?></option> <?php endforeach; ?>
ajax_employee.ctp作成
<?php foreach($employee_select as $key => $val) : ?> <option value="<?php echo $key; ?>"><?php echo $val; ?></option> <?php endforeach; ?>
これは前回の時と同じものを2個用意するだけです。
ビューの作成
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()' 'complete' => '$("#PriceBrunchId").change();' //営業所を選んだら担当者も変える ) ) ); // 担当者切り替えのJS $this->Js->get('#PriceBrunchId')->event( 'change', $this->Js->request( array('controller'=>'prices','action'=>'ajax_employee'),//url array('update' => '#PriceEmployeeId', 'dataExpression' => true, 'data' => '$("#PriceBrunchId").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('employee_id',array('label' => false, 'empty'=>'選んでください', 'type' => 'select')); ?> </td> </tr> </table> <?php echo $this->Form->end('登録する')?>
ハイライトしたところが前回のものを2つ作ったところと違うところです。
考え方としては
会社を選んで、Ajaxを使い
営業所を呼び出します。
ここで、営業所を呼び出したら担当者を呼び出すために
営業所のchangeイベントを呼び出します。
すると、担当者も呼び出して連携してくれるようになりました。
今回のは会社を選んで、営業所が1つしかなく
でも、その下の担当者が複数いる場合があったので
なんとか担当者を選べるようにしたかったからです。
CakePHPというよりはjQueryの話だったような気がしますw
スポンサードリンク
Ajaxで3つ連携するセレクトボックスを作る。
これを、CakePHP3.xで動くようにするには、どうするか
アップされないのでしょうか。
>菅原さん
コメントありがとうございます。
CakePHP3.0への本格的な移行をしていないので、まだ検証していないのです。
3.0へ移行したらブログで報告致します。