I am trying to populate dropdown list according to other dropdown list using ajax prototype.js framework.But its seems ajax observField function is not picking the change in first dropdown list .

I have two tables named mobiles and moddels
moddels table has an coloumn mobile_id for association.
my models are as follows
mobile.php

<?
class Mobile extends AppModel {
 var $name = 'Mobile';
var $hasMany = array('Moddel');
 }

?>

moddel.php

<?
class Moddel extends AppModel {
 var $name = 'Moddel';
var $belongsTo = array('Mobile');
 }

?>

controllers are as follows
moddel_controller.php

<?
 class ModdelsController extends AppController {
 var $name = 'Moddels';


     function beforeFilter()//executed before any controller action logic
    {   
    if(isset($this->Security) && $this->RequestHandler->isAjax() && $this->action = 'ajax_modd'){
    $this->Security->enabled = false;
    }
    }




 function index()
 {

  $mob = $this->Moddel->Mobile->find('list',array('fields' => array('brand') ) );
        $this->set(compact('mob'));

 }

 }
 function ajax_modd() {

    $this->set('options',
        $this->Moddel->find('list',
            array(
                'conditions' => array(
                    'Moddel.mobile_id' => $this->data['Mobile']['id']
                )
            )
        )
    );
    $this->render('/moddels/ajax_dropdown');
}
 ?>

mobile_controller.php

<?
 class mobilesController extends AppController {
 var $name = 'Mobiles';
 function index()
 {

  $mob = $this->Mobile->find('list',array('fields' => array('brand') ) );
        $this->set(compact('mob'));

 }

 }

index.ctp

<head>
<?  $javascript->link('prototype',false);?>
</head>
<h1> its not working</h1>
<?=$ajax->form('/','post',array('update'=>'comments'));?>
<?



echo $this->Form->input('Mobile.id', array('label' => 'Mobile-brand','options'=>$mob,'empty' => '-- Select a mobile --'));
echo $this->Form->input('Moddel.mobile_id', array('label' => 'Brand', 'empty' => '-- Select a model  --'));



 echo $this->Ajax->observeField('MobileId', array('url' => '/moddels/ajax_modd', 'update' => 'ModdelMobileId'));

?>
<?=$form->end('Add Comment');?>

ajax_dropdown.ctp

<?php foreach($options as $key => $val) { ?>
<option value="<?php echo $key; ?>"><?php echo $val; ?></option>
<?php } ?>

it seems that in above code ajax observeField is not picking the change in the dropdown list and it not passing the controll to the controller.
Any one please help in sorting out this problem

thanks in advances!!

Member Avatar

LastMitch

it seems that in above code ajax observeField is not picking the change in the dropdown list and it not passing the controll to the controller.

@jannat1

I assume you are talking about this line:

echo $this->Ajax->observeField('MobileId', array('url' => '/moddels/ajax_modd', 'update' => 'ModdelMobileId'));

I think you need to remove your s from Moddels to just Moddel on your mobile_controller.php file.

From this:

var $name = 'Moddels';

to this:

var $name = 'Moddel';

Then run it and see if the show an error.