AJAX Call Not Working

I had this autocomplete and dependent dropdown list working before but now it’s not even making an ajax call


<tr>

    <td><?php

$cities= array('2,1'=>'All Cities', '2'=>'Abu dhabi', '1'=>'Dubai');

            echo CHtml::dropDownList('myArea','', $cities,

                array(

					'class'=>"basic-search-input1",

                    'prompt'=>'Select City',

                    'ajax' => array(

                        'type'=>'POST',

                        'url'=>CController::createUrl('site/updateCitiesSearch'), 

                        'dataType'=>'json',

                        'data'=>array('myArea'=>'js:this.value'),  

                        'success'=>'function(data) {

                            $("#district").html(data.dropDownDistricts);

                        }',

            ))); 

?> </td>

  </tr>

  <tr>

    <td><?php echo CHtml::dropDownList('district','', array()); ?></td>

  </tr>


public function actionUpdateCitiesSearch()

    { 

	$cities = explode(",", $_POST['myArea']);

            //District			

			$data = Districts::model()->findAllByAttributes( array('emirateId'=> $cities));

            $data = CHtml::listData($data,'districtId','districtName');

            $dropDownDistricts = "<select name='select2' class='basic-search-input1'>";

            foreach($data as $value=>$name)

                $dropDownDistricts .= CHtml::tag('option', array('value'=>$value),CHtml::encode($name),true);

				

            // return data (JSON formatted)

            echo CJSON::encode(array(

              'dropDownDistricts'=>$dropDownDistricts

            ));

    }

this one is for autocomplete


<?php 

				$this->widget('zii.widgets.jui.CJuiAutoComplete', array(

					//'model'=>$model,

					//'attribute'=>'name',

					'id'=>'txtKeyword',

					'name'=>'txtKeyword',

					'value'=>"Type keyword in here...",

					//'sourceUrl' => array('site/suggest'),

					'source' => CController::createUrl('site/suggest'),

					'options'=>array(

						'focus'=>'js:function(event, ui) {

							shuffle(this);

						}',

						'delay'=>300,

						'minLength'=>2,

						'showAnim'=>'fold',

						'select'=>"js:function(event, ui) {

							$('#label').val(ui.item.label);

						}"

					),

					'htmlOptions'=>array(

						'size'=>'77',

						'style'=>"font-size: 13px; font-family: Arial,Helvetica,sans-serif; line-height: 28px; height: 28px;"

					),

			)); ?>


public function actionSuggest()

	{

			if (Yii::app()->request->isAjaxRequest && isset($_GET['term'])&&($keyword=trim($_GET['term']))!=='')

			{

				$models=UnitListings::model()->findAll(array(

					'condition'=>'district LIKE :keyword OR property LIKE :keyword',

					'order'=>'district',

					'limit'=>5,

					'params'=>array(':keyword'=>"$keyword%")

				));

				$suggest=array();

				foreach($models as $model) {

					$suggest[] = array(

						'label'=>$model->district,

						'value'=>$model->district

					);

				}

				echo CJSON::encode($suggest);

			}		

	}

also the text “Type keyword in here…” doesn’t clear when I click on the field

It sounds like you have some broken javascript somewhere on the page. Does your browser’s web console show any javascript errors?

It doesn’t make an ajax call when I enter something in the automcomplete field. same problem with the dependent dropdownlist

But does the console show any errors either when the page loads or when you attempt to make the request?

It shows these errors


SyntaxError: syntax error

[Break On This Error] 	


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E


jquery....min.js (line 2)


SyntaxError: syntax error

[Break On This Error] 	


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E


jquery...lete.js (line 2)


SyntaxError: syntax error

[Break On This Error] 	


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E


jquery....min.js (line 2)


SyntaxError: syntax error

[Break On This Error] 	


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E


fancybox.js (line 2)


TypeError: jQuery(".services").fancybox is not a function

[Break On This Error] 	


...'frameWidth': 630, 'frameHeight': 185, 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, ...

autocomplete is working on index page search field. console showing ajax call being sent

It will work again once you fix the errors that you’re getting. Just go through the javascript errors one by one until no more are being reported.