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

スポンサードリンク

以前、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

スポンサードリンク