Cakephp Ajax: City selectbox is not being populated when State is selected

[vaanipala]

I'm trying to populate the city select box based on the selected state (which is also a select box) using Ajax. When i select state, the city select box is not being populated.

There are 5 models below: Student, MerryParent, MerryClass, State, City. All of them are related to one another.

Can someone please tell me on what am I doing wrong? thank you.

The following are the models:
student.php

<?php
     class Student extends appModel{
	var $name='Student';
	var $belongsTo=array('MerryParent','State','City','MerryClass');
	
	          }
          ?>

merry_parent.php

<?php
         class MerryParent extends appModel{
	var $name='MerryParent';
	$hasMany=array(
		    'Student'=>array(
			'className'=>'Student',
			'foreignKey'=>'merry_parent_id'
			        )
				);
	$belongsTo=array('State','City','MerryClass');
	
	                     ?>

merry_class.php

<?php
                class MerryClass extends AppModel{
	         var $name='MerryClass';
	         var $hasMany=array
		('Student'=>array(
				'className'=>'Student',
				'foreignKey'=>'class_id'
				),
		 'MerryParent'
		);
	        var $belongsTo=array('State','City');
	        //var $displayField='class_name';
               }
              ?>

city.php

<?php
            class City extends AppModel{
		var $name='City';
		var $belongsTo='State';
		var $hasMany=array('MerryParent','MerryClass',
				'Student'=>array(
					'className'=>'Student',
					'foreignKey'=>'city_id'
					)
			    );
                     }
            ?>

state.php

<?php
                          class State extends AppModel{
	                         var $name='State';
	                         var $hasMany=array(
				'MerryParent',
				'MerryClass',
				'City'=>array(
				'className'=>'City',
				'foreignKey'=>'state_id'
				//'dependent'=>true
				),
				'Student'=>array(
				'className'=>'Student',
				'foreignKey'=>'state_id'
				)
			);
	
                  }
                 ?>

The controllers
students_controller.php

<?php
    class StudentsController extends AppController{
     var $name='Students';
     var $helpers = array('Html','Form','Ajax','Javascript');
     var $components=array('RequestHandler');
    
	function getcities(){
	
		$options=$this->Student->City->find('list',
										array
										('conditions'=>array(
														'City.state_id'=>$this->data['Student']['state_id']
														),
										 'group'=>array('City.name')
								        )
									);//closing parentheses for find('list'...
		
							
		$this->render('/students/ajax_dropdown');
	}
	  
		
	function add(){
	
	   
		if (!empty($this->data)){
			/*var_dump($this->data);
			die(debug($this->Student->validationErrors)); */
			$student=$this->Student->saveAll($this->data,array('validate'=>'first'));
			if (!empty($student))
			   {
				$this->Session->setFlash('Your child\'s admission has been received. We will send you an email shortly.');
						$this->redirect(array('controller'=>'pages', 'action'=>'home'));

				}
		
		   
	    } //for if (!empty....

         $states=$this->Student->State->find('list');
				
		$cities=array();
          $this->set(compact('states','cities'));

	}//end function
}
?>

merry_parents_controller.php

<?php
     class MerryParentsController extends AppController{
	
	var $name='MerryParents';
	
	
     }
     ?>

add.ctp

<?php
	 echo $javascript->link('prototype',false); 
         
	echo $form->create('Student');
	echo '<fieldset>';
	echo '<legend>Student Information</legend>';
	echo $form->input('Student.name');
	
	$options = array('Male'=>'Male','Female'=>'Female');
	$attributes = array('value'=>'Male');
	echo $form->radio('Student.gender',$options,$attributes);
	
	echo $form->input('Student.dob', array('label'=>'Date of Birth',
					'dateFormat'=>'DMY', 
					'empty'=>true,
					'timeFormat' => '', 
                'minYear' => ( 
                        date('Y') - 5 
                ), 
                'maxYear' => ( 
                        date('Y') - 2 
                ) 
				));
	echo $form->input('Student.class_id', 
			array(
			'label'=>'Enquiry Class for',
			'empty'=>'Choose one',
	'options'=>array('1'=>'Playgroup','2'=>'Nursery','3'=>'LKG', '4'=>'UKG')
			)
			);
	
	echo '</fieldset>';
		
	echo '<fieldset>';
	echo '<legend>Parent Information</legend>';
	//echo $form->input('Student.parent_id', array('type'=>'hidden'));
	echo $form->input('MerryParent.initial', 
	array('empty'=>true,
	'options'=>array('Dr'=>'Dr', 
					'Mr'=>'Mr', 
					'Mrs'=>'Mrs', 
					'Ms'=>'Ms')
	)
	);
	echo $form->input('MerryParent.name', array('label'=>'Parent/Guardian Name'));
	echo $form->input('MerryParent.email');
	echo $form->input('MerryParent.landline');
	echo $form->input('MerryParent.mobile');
	echo $form->input('MerryParent.address');
          echo $form->input('Student.state_id');
	 echo $form->input('Student.city_id');
          echo $form->input('MerryParent.postal_code');

          $options = array('url' => 'getcities', 'update' => 'StudentCityId');
      echo $ajax->observeField('StudentStateId', $options); //observes the drop down 
        changes in state id and makes an xmlHttpRequest when its contents have changed.
		
           
		echo '</fieldset>';
	
	echo $form->end('Submit');
        ?>

ajax_dropdown.ctp

<?php foreach($options AS $k=>$v) : ?>
          <option value="<?php echo $k; ?>"><?php echo $v; ?></option>
         <?php endforeach; ?>

[vaanipala]

Hi,

I noticed, that students_controller's getcities function is not at all rendering to ajax_dropdown.ctp. Coz' when i do a var_dump($options) in ajax_dropdown, nothing happens.

Please help, i've been trying to make this work for almost 2 weeks. :(
thank you.

[vaanipala]

Finally I managed to solve the prob after 2 weeks of research and reading up. The problem was Cakephp's security component was blackholing Ajax's observeField request. So, the security component has to be disabled for the observeField to work. Added the following beforeFilter code (found from the net) in StudentsController:

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